如何避免变更时重新渲染？React Native组件生命周期警告求助

嘿，这个警告我之前在开发React Native项目时也碰到过，别担心，我来给你捋捋怎么处理～

首先得明确：这个警告并不是你自己写的代码有问题，是React Native自带的TouchableOpacity组件内部还在使用已经被废弃的componentWillReceiveProps生命周期方法。下面是几个实用的解决办法：

1. 优先升级React Native到稳定新版本 #

React Native团队一直在迭代优化内部组件，这类旧生命周期的问题在新版本里基本都被修复了。你可以在项目根目录执行以下命令升级：

# npm 方式
npm install react-native@latest --save

# yarn 方式
yarn add react-native@latest

⚠️ 小提醒：升级前最好备份项目代码，或者在单独的git分支上操作，避免版本兼容带来的其他问题。

2. 开发环境临时屏蔽警告（应急用） #

如果当前项目暂时不方便升级版本，且TouchableOpacity的功能完全正常，只是看着警告闹心，可以在项目入口文件（比如App.js或者index.js）里添加代码屏蔽这个特定警告：

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
  'Warning: componentWillReceiveProps has been deprecated',
]);

不过这只是权宜之计，长远来看还是升级版本更靠谱。

3. 自定义封装TouchableOpacity（不推荐） #

除非你有特殊需求，否则不建议这么做——你可以自己封装一个TouchableOpacity组件，用新的static getDerivedStateFromProps替代旧的生命周期逻辑。但这个过程需要复刻原组件的所有交互和样式逻辑，工作量不小，性价比不高。

总的来说，这个警告不会影响当前代码的正常运行，只是React官方提醒大家旧的生命周期方法会在后续大版本中被移除。最省心的解决方式还是升级到最新的稳定版React Native。

内容的提问来源于stack exchange，提问作者DCR