Question

我是React / React Native的新手，我刚开始在一家公司工作，因此从事现有项目。问题是，在代码的开头，我无法理解此Creation Lifecycle Hooks：

export default class ListResult extends React.Component {
  constructor(props) {
    super(props);
    this.state.answers = props.navigation.state.params.answers;
    this.state.saving = props.navigation.state.params.saving;
    this.state.loading = false;
  }

  state = {
    answers: null,
    saving: false,
    loading: true,
    location: null,
    dialogLocation: false,
    latitude: '',
    longitude: '',
  };

  location = null;
  latitude = '';
  longitude = '';
}

有人可以给我一些解释，为什么他为什么要使用构造函数来初始化状态，然后再使用状态来定义变量，然后再为这些变量设置一些值？

Answer 1

这是一个常见的错误，甚至在related docs中也有强调：

避免将道具复制到状态中！（在构造函数中）这是一个常见错误。 仅当您有意忽略道具更新时才使用此模式。

此代码应大致固定为：

class ListResult extends React.Component {
  state = {
    answers: null,
    ...
  };

  componentDidMount = () => {
    const { answers, saving } = props.navigation.state.params;
    this.setState({ answers, saving });
  };
}

作为解释，他在“现代” React中同时使用了类实例和构造函数（为什么？），并使用了类组件you shouldn't use the constructor（而不是使用类属性）。

定义类后，首先评估类实例，然后调用构造函数，这就是为什么他在其实例中覆盖初始值。

Answer 2

在没有详细回答问题的情况下，我试图强调反应生命周期思维与常规JS DOM操作的区别。如果您使用React，则可以使用JS代码而非真正的DOM来操纵所谓的“虚拟dom”。

虚拟dom的工作原理：如果dom树中任何组件的任何属性或状态发生变化，整个子dom树将被重新渲染。生命周期意味着您如何处理组件中的这些连续重新渲染。

但是不用担心。这并不意味着整个DOM每次都会重新渲染。在这个虚拟dom之上，有一个叫ReactDOM的家伙，它不断地比较虚拟dom状态并仅在真实DOM中进行必要的更改。

了解React生命周期挂钩

2 个答案: