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

我的想法/理解是，只要 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函数并获取更新变量，但它永远不会刷新我的组件。

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

传递给组件的参数被复制value，不做参考。因此，当您渲染最外层组件时，您将传递当前值 of percentage进入Start成分：

<Start percentage={percentage} />

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

你不能聪明地尝试用包含属性的对象来解决这个问题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} />
  }
}

从技术上来说是correct当组件的 props 改变时，组件就会更新；然而，改变它的 props 的唯一方法就是重新渲染它！道具在组件内是只读的。这就是为什么我说考虑道具更改驱动组件重新渲染是误导性的（或不完整的）。