React在道具更新上重新渲染组件

我的想法/理解是，只要道具或状态发生变化，反应组件就会更新。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功能，并获得更新变量回来，但它永远不会刷新我的组件。

我误解了道具更新的工作方式吗？

来源

2017-04-25 PourMeSomeCode

为*变量*'百分比'指定一个新值不能神奇地更新*道具*'百分比'。这不是JavaScript的工作原理。这是一个简化版本的问题：'var foo = 42; var component = {foo：foo}; foo = 21; console.log（component.foo）;'仍然记录第一个值'foo'，'42'。 –

抱歉，我很愚蠢:)我如何去更新值，以便它更新道具以及重新组件？@FelixKling – PourMeSomeCode

你可以让百分比成为你的状态的一部分，并使用setState – aw04

传递给组件的参数被复制值，而不是引用。所以，当你呈现最外部组件，您传递电流值的percentage到Start组件：

<Start percentage={percentage} />

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

你不能很聪明，试着用一个包含percentage属性的对象来解决这个问题，因为对象（参数本身）不会改变，只是它的属性。

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

说一个组件在属性更改时更新有点误导;组件在重新渲染时实际更新。很多时候，这是因为封闭（父）组件的状态改变（或者被重新渲染），并且它会将新的道具传递给内部组件。在你的情况下解决方案是使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} /> 
    } 
}

这在技术上是正确是组件更新时，它的道具变化;然而，改变道具的唯一方法就是重新渲染道具！道具在组件内是只读的。这就是为什么我说它是误导性（或不完整）考虑支持变化驱动组件重新渲染。

来源

2017-04-25 17:38:14

老实说，男人，谢谢你这样一个很好解释的回应。你已经解释了为什么它不能正常工作，以及如何让它起作用。希望我能更多地赞扬你。再次感谢:) – PourMeSomeCode

很高兴帮助！ React是一个很棒的平台，但需要一些习惯！ –

优秀的答案！目前学习React太有用了！ –

React在道具更新上重新渲染组件

回答

相关问题