Question

我认为我们已经被this issue（避免级联渲染的策略）所咬，但我不知道该怎么办。

简而言之，子组件正在接收属性更新并在父级收到其prop更新之前执行父级绑定的render回调。结果是回调使用了陈旧的属性，并且我们得到了不一致的渲染。

这是一个粗略的表示：

class Parent extends React.Component {
  renderHeader = () => {
    return <<uses this.props to render a header>>
  }

  render () {
    return ( <Child renderHeader={this.renderHeader}/> )
  }
}

function mapStateToProps(state) {
  return Object.assign({}, state.tree.branch)
}

export default connect(mapStateToProps)(Parent);


...


class Child extends React.Component {
  render () {
    return (
      ...
        this.props.renderHeader()
      ...
    )
  }
}

function mapStateToProps(state) {
  return Object.assign({}, state.tree.branch)
}

export default connect(mapStateToProps)(Child);

我可以通过显式地将props传递给回调来实现这项工作，或者只是避免使用这种模式，但我觉得这里有一个更大的概念/模式/反模式，我无法理解。问题：

将两个组件连接到状态树实际上是无效的吗？
父母或子女是否先获得道具有明确的逻辑吗？

嵌套的react-redux连接组件的渲染不一致

0 个答案: