避免 React Native 中的状态变化 - 是 Kosher 吗？

Posted 2023-04-18

【中文标题】避免 React Native 中的状态变化 - 是 Kosher 吗？

【英文标题】：Avoiding State Changes in React Native - Is it Kosher?

【发布时间】：2017-02-18 10:19:47

【问题描述】：

我们的团队使用 React Native 已经快一年了，我们早期遇到的一个问题是渲染速度。我们的应用程序中有多个组件需要用户拖动，而状态更改（与 shouldComponentUpdate 相结合）根本不足以实现这一目标。

我们已经通过两种方式解决了这个问题，我想知道这些方法在多大程度上是 kosher 与 hacks。

Direct Manipulation 和 setNativeProps - 我们经常使用 setNativeProps，以至于我们创建了一个类似 Redux 的框架；但是，它不是修改状态，而是使用 setNativeProps 来提高速度。这样做的目的是扩展 setNativeProps ，使其不仅仅在组件内使用；但是，我们仍然尽可能使用状态更改。

Scrollview 和 TextInput - 我们已经设法以与 setNativeProps 配合使用的方式来旋转和定向 Scrollview 和 TextInputs，以便拖动内容更流畅、更原生，并且可以更快地修改文本比状态变化所允许的要多。

我们想知道这一切是多么洁净，因为 React Native 网站只注意到它的复杂性：

setNativeProps 是命令式的，它将状态存储在本机层（DOM、UIView 等）中，而不是在您的 React 组件中，这使您的代码更难推理。

我们应该改造我们的应用程序吗？

【问题讨论】：

你在使用不可变对象吗？你所描述的绝对不利于反应。问题是，你不应该改用原生开发吗？ React-native 仍然是一个年轻的产品，并没有解决所有的性能问题。

【参考方案1】：

不建议致电setNativeProps，但如果它可以让您达到您想要的质量，我不认为这是一个巨大的危险信号。正如文档警告的那样，它确实使您的代码更难推理，因为它在您的本机视图中设置了不在您的 React 组件层次结构中的状态。

控制这种复杂性的两种方法是减少可以通过 JSX 或 setNativeProps 在给定组件上设置 props 的不同代码段的数量，以及逐渐远离 setNativeProps 并使用 shouldComponentUpdate 减少渲染而PureComponent。

如果您使用 Redux，不可变数据结构可以更轻松地实现 shouldComponentUpdate 和 Reselect 选择器。如果您经常渲染的组件具有创建许多元素的render() 方法，请将这些元素的组重构为不一定需要经常渲染的纯组件。 constant elements Babel transform 将通过只创建一次来消除永远不会改变的元素的大部分成本；当 React 在两个连续的 render() 传递中看到相同的元素时，它不会第二次重新渲染该元素。