Question

我正在使用react 15和react-router 4.容器与react-router连接，url参数在每个请求上更改，然后{Side}组件中的currentUrl prop更新。这是在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()函数（以及组件的constructor）在组件再次安装后正常触发。但是，componentWillReceiveProps仅在组件的初始渲染后触发。到目前为止它被解雇是因为一些道具在没有改变当前位置的情况下被更新（Sidebar组件的其他道具）。

我的工作是计算constructor中的一些逻辑（以减少一些负载），其余部分计算在render()上，避免状态。

componentWillReceiveProps不会在道具更新上触发

1 个答案: