Reactjs react构造函数或组件将接收道具

我使用react两个月，react将在构造函数中完成一些事情，有时react将完成ComponentWillReceiveProps。 例如：

renderGroups（）{
返回此.props.groups.map（（组，i）=>{
返回；
});
}

---

每次使用

构造函数和
组件将接收props
用于两个不同的目的时，此写入操作都将执行PickGroup构造函数。根据反应文件

建造商：

React组件的构造函数在装入之前被调用。
在实现React.Component子类的构造函数时，您可以
应该在任何其他声明之前调用super（props）。否则,，
构造函数中将未定义this.props，这可能导致
虫子

构造函数是初始化状态的正确位置。如果你不
初始化状态，并且不绑定方法，则不需要
为React组件实现一个构造函数

组件将接收道具：

在装入组件之前调用componentWillReceiveProps（）
接收新道具。如果需要更新状态以响应
道具更改（例如，要重置道具），您可以比较this.props
和nextProps，并在中使用此.setState（）执行状态转换
这个方法

请注意，即使道具没有更改，React也可能调用此方法，因此如果需要，请确保比较当前值和下一个值
只想处理更改。当父组件
使组件重新渲染

React不调用组件将在安装过程中使用初始道具接收道具。仅当某些组件的
道具可能会更新

因此，一般来说，当父组件发送了不同的道具时，您可能希望在组件中调用take actions，在这种情况下，您将使用
componentWillReceiveProps
以及
构造函数来初始化带有道具的状态

在您的情况下，由于您使用的是映射函数，因此每当调用
renderGroups
函数时，您都会一次又一次地装载相同的组件，因此每次都会调用
构造函数，而不是
组件将接收props

我希望你，我能够解释一下，你在这里问的问题让人困惑，但是你提到React会收到一个
构造函数（）
函数，有时它会收到一个componentWillReceiveProps

React中的
constructor（）
的目的是初始化状态。您可以在首次创建组件时初始化状态。之后，在
render（）
方法中使用state，然后在将来的某个时候，使用
setState（）
更新该状态

与
constructor（）
函数不同，创建的每个React组件都需要
render（）
方法，否则，React将抛出错误。React不需要
constructor（）
函数，但它是在基于类的组件中实现的，如下所示：

class App extends React.Component {
  constructor() {

   }

  // React says we have to define render()
  render() {
    window.navigator.geolocation.getCurrentPosition(
      (position) => console.log(position),
      (err) => console.log(err)
    );
    return <div>Latitude: </div>;
  }
};

当您使用
constructor（props）
函数时，需要添加
super（props）。我们为什么要加上这个

请记住，我在这里谈论的是基于类的组件，请记住，作为基于类的组件，我们上面的
App
组件正在扩展或借用
React.component
基类的功能

这个基类有一个自己的
constructor（）
函数，其中包含一些代码，用于为我们设置react组件

当我们在
App
类中定义
constructor（）
函数时，我们实际上是在重写或替换
React.Component
类中的
constructor（）
函数，但我们仍然需要确保
React.Component
constructor（）中的所有设置代码
函数仍会被调用

因此，为了确保调用
React.Component
的
constructor（）
函数，我们调用
super（props）
super（props）
是对父类
constructor（）
函数的引用，仅此而已

每次在基于类的组件中定义
constructor（）
函数时，我们都必须添加
super（props）

如果不这样做，我们将看到一个错误，说明我们必须调用
super（）

定义此
构造函数（）
函数的全部原因是初始化状态对象

为了初始化我的状态对象，在
super（props）下面调用我将要编写的代码：

class App extends React.Component {
  constructor(props) {
      super(props);

      this.state = {};
   }

  // React says we have to define render()
  render() {
    window.navigator.geolocation.getCurrentPosition(
      (position) => console.log(position),
      (err) => console.log(err)
    );
    return <div>Latitude: </div>;
  }
};

我将
lat
属性的值设置为
null
，因为我还没有纬度，纬度值最终将是一个数字，在这种情况下，当您知道该值将是一个您还没有的数字时，您可以将其默认为
null

现在，假设我们在这个应用程序上出现错误，我们根本无法获取任何数据或状态。我们可以向状态添加另一个名为
errorMessage
的属性，我们可以将其默认为空字符串，如下所示：

class App extends React.Component {
          constructor(props) {
              super(props);

      this.state = {lat: null, errorMessage: '' };
   }

好的，现在让我们讨论一下
constructor（）
，通过更改
this.state
并重构为
state={lat:null，errorMessage:'}构造函数（）

class App extends React.Component {
   state = {lat: null, errorMessage: '' };
}

这相当于使用
constructor（）
函数，我可以通过转到并将上述代码添加到左侧面板，看看Babel如何将其转换为
constructor（）
并将其转换回
This.state=
来证明这一点，如下所示：

如果您想自己复制，请注意Babel工具左侧勾选了哪些预设


class App extends React.Component {
      constructor(props) {
          super(props);

      this.state = {lat: null};
   }

class App extends React.Component {
          constructor(props) {
              super(props);

      this.state = {lat: null, errorMessage: '' };
   }

class App extends React.Component {
   state = {lat: null, errorMessage: '' };
}