javascript - componentWillReceiveProps 不会在 props 更新时触发

Question

我使用的是react 15和react-router 4。容器与react-router连接，url参数在每次请求时都会改变，那么currentUrl属性是在侧边栏组件中进行了更新。这是在 Sidebar.js 上本地捕获的，并存储在本地状态中(这对于更多操作是必要的)。但是，componentWillReceiveProps() 仅在初始渲染时调用几次，并且如果用户在此之后导航，则不会触发。

Container.js

class Container extends React.Component {

    render() {
        const { match: { url } } = this.props;

        return (
            <Sidebar
              currentUrl={url}/>
         );
    }
}

export default SidebarContainer = withRouter(connect(
  mapStateToProps,
  mapDispatchToProps,
)(Container));

Sidebar.js

componentWillReceiveProps(nextProps) {
    const { currentUrl } = nextProps;

    this.setState({
      // calculations on currentUrl
    });
}

render() {
    const { currentUrl } = this.props;

    return <div></div> // view
}

组件的架构遵循React Router's sidebar example .

Answer 1

React 路由器会在每次 url 更改时再次渲染每个路由，因为它作为不同的子组件属于路由内部。因此，自从再次安装组件后，render() 函数(以及组件的构造函数)就正常触发了。但是，componentWillReceiveProps 仅在组件初始渲染后触发。到目前为止，它被触发是因为一些 Prop 在没有更改当前位置的情况下进行了更新(Sidebar 组件的其他 Prop )。

我的解决方法是在构造函数中计算一些逻辑(以减少一些负载)，并在render()上计算其余逻辑，避免状态。