了解 React 生命周期钩子

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 中被强调过：

Avoid copying props into state! (in the constructor) This is a common mistake. Only use this pattern if you intentionally want to ignore prop updates.

这段代码大致应该固定为：

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

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

至于解释，他在“现代”React 中同时使用 class 个实例和一个构造函数（为什么？），具有 class 个组件 you shouldn't use the constructor（相反，使用 class 属性).

定义 class 时，首先评估 class 个实例，然后调用构造函数，这就是他覆盖实例中初始值的原因。

Answer 2

在不详细回答问题的情况下，我试图强调 React 生命周期思维与传统 JS DOM 操作的区别。如果你使用 React，你会用你的 JS 代码操纵所谓的“虚拟 dom”，而不是真正的 DOM.

虚拟 dom 的工作原理简而言之：如果 dom 树中任何组件的任何属性或状态发生变化，整个子 dom 树都会得到 re-rendered。生命周期意味着你如何处理这些组件内的连续re-renderings。

不过不用担心。这并不意味着整个 DOM 每次都得到 re-rendered。在这个虚拟 dom 之上，有一个叫做 ReactDOM 的家伙，它不断地比较 virtual-dom 状态，并只在真实 DOM.[=10= 中进行必要的更改。 ]

了解 React 生命周期钩子

Understanding React Lifecycle Hooks

lifecycle

reactjs

react-native

react-lifecycle