javascript - React 在 prop 更新时重新渲染组件

Question

我的想法/理解是，只要 props 或状态发生变化，React 组件就会更新。

所以我声明我的变量:

let percentage = {
  width: '10%',
};

并运行一个 setInterval 函数来在这么长时间后更改该变量:

setInterval(function() {
  percentage = {
    width: '50%',
  };
}, 5000);

在下面我渲染我的组件:

Meteor.startup(() => {
  render((
    <Router>
      <div>
        <Nav />
        <Route exact path="/" render={() => <Start percentage={percentage} />} />
        <Route path="/app" component={App} />
        <Modal />
      </div>
    </Router>
  ), document.getElementById('render-target'));
});

我在另一个文件中显示的百分比如下所示:

export default class Start extends Component {
  render() {
    return (
      <div className="home">
        <div className="meter orange">
          <span style={this.props.percentage} />
        </div>
      </div>
    );
  }
}

虽然我的组件从未更新，但我已将 console.log 放入 setInterval 函数中并取回更新变量，但它从未刷新我的组件。

我是否误解了 Prop 更新的工作原理？

Answer 1

传递给组件的参数是通过值复制的，而不是引用。因此，当您渲染最外面的组件时，您将百分比的当前值传递到Start组件中:

<Start percentage={percentage} />

从 Start 组件的 Angular 来看，即使提供其初始值的变量发生变化，其属性也永远不会改变。

你也不能聪明地尝试使用包含属性percentage的对象来解决这个问题...因为对象(参数本身)不会改变，只会改变它的属性.

那么一个糟糕的程序员该怎么办呢？

说组件在其属性更改时更新有点误导；组件在重新渲染时实际上会更新。通常，发生这种情况是因为封闭(父)组件的状态发生变化(或其已重新渲染)并且它将新的 props 传递给内部组件。您的情况的解决方案是使 percentage 成为封闭组件状态的一部分。所以你会得到这样的东西:

class Parent extends Component {
  constructor(props, ...args) {
    super(props, ...args)
    this.state = { percentage: { width: '0%' } }
    setInterval(() => this.setState({ percentage: { width: '50%' } }), 5000)
  }
  render() {
    return <Start percentage={this.state.percentage} />
  }
}

从技术上来说，组件在其 props 更改时更新是正确的；然而，改变它的 props 的唯一方法就是重新渲染它! Prop 在组件内是只读的。这就是为什么我说考虑 Prop 更改驱动组件重新渲染是误导性的(或不完整的)。