子组件不更改道具

Question

我有以下结构：

class Parent extends React.Component {

  componentDidMount() {
    document.addEventListener('keydown', () => {
      this.value++;
    })
  }

  this.value = 0;

  render() {
    return (<ChildComponent value={this.value} />) 

ChildComponent只是呈现值：

class ChildComponent extends Component {
  render() {
    return (
        <div>
            {this.props.value}
        </div>
    );
  }}

Answer 1

您应该将该值添加到父状态。这就是React的工作方式。即使您可以手动触发子组件上的重新程序，它仍然是0，因为仍然0提供了道具。当React检测到父组件上的状态发生了变化时，它将计算所有子元素的虚拟dom，对虚拟dom和实际dom进行比较，然后有选择地用这些值更新实际dom（实际上只有子组件div的内部文本是新的）。React经过了令人难以置信的优化，可以使用虚拟dom处理重新渲染，您不应该担心这种情况下的性能损失。