React native（vs. React）中的不变性和组件道具

Question

这个问题与How to pass props to {this.props.children}有点关系。

这听起来像是一个愚蠢的问题，已经被回答了一百万次了，但是从我到目前为止所读的内容中我无法弄清楚什么是真实的，什么不是。我在React或React Native文档中找不到有关此主题的详细信息。

那么，有谁知道如何在本地响应中处理道具（在幕后）？我之所以这样问，是因为我已经在几个地方读过以下任一书：

1. 道具是不变的
2. 组件本身是不可变的
3. 道具/组件不是一成不变的，但是更改它们不会对渲染产生任何影响

我还认为，react native在处理道具时，就像React一样（即，react native是直接使用react的，因此它们的行为方式相同）。

我想检查这3条陈述中哪一条是正确的，所以我试图一一打破所有陈述，以了解哪个陈述正确。我将在这里描述的所有测试用例都在this snack中实现。

道具是一成不变的吗？

让我们考虑这个简单的示例：

const style = {height: 10, width: 10, backgroundColor: "red"};
const firstItem = <View style={style} />;
firstItem.props.style = {...style, height: 100};
console.log(firstItem.props.style.height);

如果firstItem.props是不可变的，则应该打印10，因为firstItem.props.style = {...style, height: 100};不会有任何作用。但这会打印100，因此，我必须得出结论：在本机响应中，组件的props属性不是不可变的。

组件本身是不可变的吗？

与以前相同，让我们为此提供一个简单的测试用例：

const secondItem = <View style={style} />;
secondItem.props = {style: {...style, height: 200}};
console.log(secondItem.props.style.height);

同样，如果10是不可变的，则应打印secondItem，但它打印200。因此，组件在本机响应中不是不可变。

更改道具对渲染没有影响吗？

这次，我不需要修改代码，只需要渲染这两个项目，看看它们是高矩形还是小正方形。正如您可能已经猜到的那样，这将渲染两个高矩形，这意味着更改可变的组件/属性确实会对组件的渲染产生影响。

export default class App extends React.PureComponent {
  render() {
    return (
      <View style={{ margin: 20, padding: 20, flexDirection: "row" }}>
        {firstItem}
        {secondItem}
      </View>
    );
  }
}

显示以下内容：

我的问题

我的测试用例是否存在缺陷？在处理道具方面，react和react native是否有区别？

最后，（也许）最重要的是，即使React native不能强制道具不变，为什么要对其进行突变也被认为是“危险”或简单的做法（更难预测/调试）？换句话说，为什么反应会提供React.cloneElement而不是具有不变的props。这是否意味着他们建议不要变异道具，但是他们不想施加这种约束，或者我只是错过了一些东西。

最终，针对特定用例的应用程序，为什么在我链接的原始问题中suggested是使用以下形式：

React.cloneElement(child, { doSomething: this.doSomething })

而不是（例如）对组件进行突变：

child.props = {...child.props, doSomething: this.doSomething }