javascript - React 中的 props 不应该被更改/突变的原因是因为 React 希望元素尽可能可预测吗？

Question

来自 React 文档。

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

考虑:

function Welcome(props) {   
  return <h1>Hello, {props.name}</h1>; 
}

或

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

将使我们能够做到这一点:

<Welcome name="Luke" />;
<Welcome name="Leia" />;

在 DOM 中按照我们的意愿使用，

你好，卢克

你好，莱娅

现在当人们规定不应更改 props 时，这是有道理的，原因是在我看来这与更改图像标签的属性值一样吗？

HTML:

<img id="Executor" alt="Picture of Executor" src="/somepath/vaders-star-destroyer-executor.jpg"/>

JS:

与此同时，很久以前在一个遥远的星系中的 Javascript 文件中......

var imageOfVadersStarDestroyer = document.getElementById('Executor');

imageOfVadersStarDestroyer.src = "/somepath/vaders-star-destroyer-avenger.jpg"

因为如果我们不断更改元素属性值，这会导致困惑和渲染速度变慢？

那么 React 中规定永远不要更改 props 的原因是因为库正在尝试使元素尽可能可预测吗？

Answer 1

在 React 之外设置 props 是危险的，应该避免。为什么？主要原因是它不会触发重新渲染。因此会出现错误和意外行为。

重新渲染

大多数时候，props 是在父组件中作为状态存储的数据，通过调用 setState()(或 React.useState( ))。一旦 setState() 被调用，React 就会重新渲染并计算引擎盖下发生的变化，以及最新的 props 和状态。手动为 props 赋值，因此不会通知 React 数据已更改并且必须重新渲染某些内容。

最佳实践

将 props 设置为只读允许 React 组件尽可能纯净，这显然是一个很好的做法，即使在编写纯 JS 时也是如此。数据不会意外更改，只能通过调用 setState() 来完成(您可能听说过 single source of truth，这正是 React 正在尝试的杠杆)。

想象一下，您注意到应用程序出现问题并且显示给最终用户的数据与源数据完全不同，试图找出数据在哪里被操纵会很痛苦，不是吗？ :)