Question

我是React和编程的新手，对componentWillReceiveProps方法有疑问。在LikesComponent类中，有updateLikes方法执行ReactDOM.render(<LikesComponent likes={this.props.likes+1} />, document.getElementById("app"))。我认为每次调用<ComponentName />时都会创建一个新实例，这就是为什么当我看到componentWillReceiveProps方法记录的消息时，我感到非常惊讶。相反，我希望看到getDefaultProps, getInitialState and render方法记录的消息。那么，不调用<ComponentName />总是创建该类的新实例？您能否详细说明何时创建新实例以及何时更新实例？我现在很困惑。提前谢谢。

body {
  padding: 40px;
  font-family: "helvetica neue", sans-serif;
}

.container {
  width: 600px;
  margin: auto;
  color: black;
  padding: 20px;
  text-align: center;
}
.container h1 {
  margin: 0;
  padding: 20px;
  font-size: 36px;
}
.container .btn {
  border: 0;
  padding: 15px;
  margin: 10px;
  width: 20%;
  font-size: 15px;
  outline: none;
  border-radius: 3px;
  color: #FFF;
  font-weight: bold;
}

.btn.blue-btn {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

.btn.blue-btn:hover {
   background-color: #6FC6FF;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
    var LikesComponent = React.createClass({
      updateLikes: function() {
        ReactDOM.render(
          <LikesComponent likes={this.props.likes+1}/>,
          document.getElementById("app")
        )
      },
      getDefaultProps: function() {
        console.log("getDefaultProps");
        return({
          likes: 0
        })
      },
      getInitialState: function() {
        console.log("getInitialState");
        return({
          popular: false
        })
      },
      componentWillReceiveProps: function(nextProps) {
        console.log(nextProps);
        console.log("Componentwillreceiveprops");
        this.setState({
          popular: nextProps.likes >= 10
        })
      },
      render: function() {
        console.log("Component Rendered");
        return (
          <div className="container">
            <h1>{this.state.popular ? "I'm popular" : null}</h1>
            <button className="btn blue-btn" onClick={this.updateLikes}>Likes: {this.props.likes}</button>
          </div>
        )
      }
    });

    ReactDOM.render(
      <LikesComponent />,
      document.getElementById("app")
    );
    </script>
  </body>
</html>

Answer 1

所有<LikesComponent likes={5} />创建了一个对象，意味着＆＃34;我们想在这里使用这些道具（喜欢= 5）和＃34;呈现LikesComponent实例。

React会将这组新的东西与它已呈现的东西进行比较并思考＆＃34;嘿，我已经使用（likes = 4）＆＃34;渲染LikesComponent。

由于组件类型相同且层次结构中的位置相同，因此React将使用新的prop值更新实例，而不是销毁旧实例并创建新实例。

基本上是这样的：

当组件呈现在层次结构中当前不存在该组件的实例的位置时，将创建（装入）新实例。

当组件呈现在层次结构中已存在组件实例的位置时，将重用实例。

在新渲染中，当该类型的组件未渲染到实例所在的位置时，实例将被销毁（卸载）。

React - componentWillReceiveProps方法：new vs updated实例

1 个答案: