React 在 prop 更新时重新渲染组件 [英] React re-rendering a component on prop update

问题描述

我的想法/理解是，只要 props 或 state 发生变化，react 组件就会更新.

所以我声明了我的变量:

让百分比 = {宽度: '10%',};

并运行一个 setInterval 函数以在很长时间后更改该变量:

setInterval(function() {百分比 = {宽度: '50%',};}, 5000);

在这下面我渲染我的组件:

Meteor.startup(() => {使成为((<路由器><div><导航/><路由精确路径="/" render={() =><开始百分比={percentage}/>}/><Route path="/app" component={App}/><模态/>

</路由器>), document.getElementById('render-target'));});

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

export default class Start extends Component {使成为() {返回 (<div className="home"><div className="米橙"><span style={this.props.percentage}/>

);}}

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

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

解决方案

传递给组件的参数是按值复制的，而不是引用.因此，当您渲染最外层组件时，您将 percentage 的 current value 传递到 Start 组件中:

<开始百分比={percentage}/>

从 Start 组件的角度来看，它的属性永远不会改变，即使提供其初始值的变量是.

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

那么糟糕的程序员该怎么办?

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

class Parent extends Component {构造函数(道具，...参数){超级(道具，...参数)this.state = { 百分比:{ 宽度:'0%' } }setInterval(() => this.setState({ 百分比: { 宽度: '50%' } }), 5000)}使成为() {return <起始百分比={this.state.percentage}/>}}

技术上正确组件在其 props 改变时更新；然而，改变它的道具的唯一方法是重新渲染它！道具在组件内是只读的.这就是为什么我说将道具更改驱动组件重新渲染的想法具有误导性(或不完整).

How I think/understood was that react components update whenever their props or state change.

So I declare my variable:

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

and have a setInterval function running to change that variable after so long:

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

and below this I render my component:

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'));
});

Where I display the percentage in another file that looks like:

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

My component never updates though, I have put a console.log into the setInterval function and get the update variable back but it never refreshes my component.

Have I misunderstood how props updates work?

解决方案

The parameters passed to a component are copied by value, not reference. So when you render the outermost component, you're passing the current value of percentage into the Start component:

<Start percentage={percentage} />

From the perspective of the Start component, its property never changes, even though the variable that provided its initial value is.

You can't be clever and try to get around this with an object that contains a property percentage either...because the object (the parameter itself) won't change, only its properties.

So what's a poor programmer to do?

It's a bit misleading to say that a component updates when its properties change; components actually update when they're re-rendered. Very often, this happens because the enclosing (parent) component's state changes (or its been re-rendered) and it will be passing new props down to the inner component. The solution in your case is to make percentage part of the state of the enclosing component. So you would have something like this:

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} />
  }
}

It's technically correct that a component updates when its props change; however, the only way to change its props is to re-render it! Props are read-only inside a component. Which is why I say it's misleading (or incomplete) to think about prop changes driving component re-rendering.

这篇关于React 在 prop 更新时重新渲染组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！