Question

我正在使用react-router v4编写React（ES6，v16）（打字稿）应用程序。我观察到一种非常奇怪的行为。这是我的渲染代码（非常简化）：

render() {
   <Switch>

      <Route
         path="/foo/add"
         render={ props => {
                return (
                   <FormEntry title="add new" />
                );
         }}
      />

      <Route
         path="/foo/edit/:id"
         render={ props => {
                 return (
                    <FormEntry title="edit item" />
                 );
         }}
      />
   </Switch>
}

这是FormEntry组件（简化）：

class FormEntry extends React.Component< { title: string }, any > {
    render() {
       return (
          <div>
             {this.props.title}
          </div>
       );
    }

    componentDidMount() {
       // code goes here
    }

    componentDidUpdate() {
       // code goes here
    }
}

现在，在应用程序内部，单击链接“/ foo / add”时，将触发第一个“Route”组件中的处理程序（按预期方式）并安装组件“FormEntry”。正确触发方法componentDidMount。

现在我点击链接“foo / edit / 1”。第二个Route的处理程序被触发。

这次，在“FormEntry”组件内部，未触发生命周期方法“componentDidMount”，调用方法“componentDidUpdate”。但这是正在安装的FormEntry的另一个“实例”。我期待看到生命周期方法开始......

看起来我的应用程序中只有一个“FormEntry”实例。那么为什么在第二种情况下（当URL处理程序为url“foo / edit：id”时）这个实例不会通过所有生命周期方法？

这是React的v16版本的重大变化吗？（我在以前版本的反应中没有观察到这种行为。）

非常感谢您的见解

Answer 1

<Switch>检查上一个匹配路由的JSX，并将其与下一个路由的新JSX进行比较。

如果匹配，它将使用它，只更新更改的值而无需重新安装组件。

否则它将创建新的react元素并实例化新的组件。

点击此处：https://github.com/ReactTraining/react-router/pull/4592

转向这是为了使用这样的关键属性：

render() {
   <Switch>

      <Route
         path="/foo/add"
         render={ props => {
                return (
                   <FormEntry key="1" title="add new" />
                );
         }}
      />

      <Route
         path="/foo/edit/:id"
         render={ props => {
                 return (
                    <FormEntry  key="2" title="edit item" />
                 );
         }}
      />
   </Switch>
}

React：componentDidUpdate对于组件的2个不同实例是否相同？

1 个答案: