React中的生命周期和子组件

React是一个流行的JavaScript库,它使用了一个叫做"组件"的概念。在React中，组件是一个可重用的单元，可以通过组装它们来构建更大的组件。React组件有生命周期，生命周期包括挂载、更新和卸载三个阶段。

React的生命周期方法

mount(挂装)

• constructor()

在一个React组件被挂载之前，React会先执行构造函数。它是React组件的第一个调用的方法。我们可以使用它来初始化组件的状态（state）或者绑定方法(这里的方法通常指绑定$this的可执行函数)。

• getDerivedStateFromProps(props, state)

getDerivedStateFromProps()是一个生命周期方法，其目的是将传递的props应用于组件状态和返回更新的state。并且返回值必须是state或者null。

• render()

在render()函数中，React组件将组件数据转化为虚拟DOM树，这些虚拟DOM最终将被用于在页面上渲染一些真正的浏览器可视化页面元素。

• componentDidMount()

在render()函数调用完成之后，组件开始渲染到页面上。在组件被页面挂载后，React会调用componentDidMount()方法.在这个方法中，可以开始发送Ajax请求，监听事件或者其他我们可能需要做的有副作用的操作。

update方法

• shouldComponentUpdate(nextProps, nextState)

当组件接收到新的props或者state时，React将尝试判断组件是否需要进行重新渲染。组件在每个渲染周期中都会调用shouldComponentUpdate()来告诉React是否允许进行重新渲染。默认情况下，shouldComponentUpdate()会返回true。但是，我们可以对其进行重写并对其进行性能优化。

• getSnapshotBeforeUpdate(prevProps, prevState)

React使用getSnapshotBeforeUpdate()来提供在组件更新之前读取DOM状态的机会。例如，在内容滚动固定位置之前记住滚动条的位置。

• componentDidUpdate(prevProps, prevState, snapshot)

组件更新后，React将调用 componentDidUpdate()方法，此时组件通常会更新状态或者在此期间请求数据。

unmount(卸载)

• componentWillUnmount()

当组件即将从DOM中卸载时，componentWillUnmount()将被调用。在这里，处理事件监听器、定时器或者占用内存的任何组件都可以进行卸载操作。

React的子组件

当我们定义一个组件时，我们可以将其定义为子组件，在父组件中使用子组件的方式.

创建React组件

import React from "react";

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

上述代码中创建了一个名为Welcome的React组件。它只是一个无状态的组件，它仅仅显示了props接收到的一个name值。

在父组件中引用Welcome

import Welcome from "./Welcome";

class App extends React.Component {
  render() {
    return (
      <div>
        <Welcome name="Jason" />
        <Welcome name="Tom" />
        <Welcome name="Jerry" />
      </div>
    );
  }
}

export default App;

我们可以在App父组件中引用Welcome组件三次，并传入不同的name值作为其props。这将会渲染三次Welcome组件，每个都显示了不同的文本“Hello，Jason”、“Hello，Tom”和“Hello，Jerry”。

示例

我们假设我们正在操作一个React组件(App)通过props中获得的数据来定义一个嵌套组件。

import React, { Component } from 'react'

export default class App extends Component {

  state = {
    users: [{
      name: 'James',
      age: 25,
      country: 'England'
    },{
      name: 'Lisa',
      age: 34,
      country: 'America'
    },{
      name: 'Alan',
      age: 23,
      country: 'Australia'
    }]
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      let addYears = [...this.state.users];
      addYears.forEach(element => {
        element.age += 1;
      })
      this.setState({ users: addYears });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    const { users } = this.state; 
    return (
      <div>
        <h1>Users</h1>
        <UserList users={users} />
      </div>
    )
  }
}

const UserList = ({ users }) => {
  return (
    <ul>
    {users.map((user, index) =>
      <User 
        key={index}
        name={user.name}
        age={user.age}
        country={user.country}
      />
    )}
  </ul>
  )
}

const User = ({ name, age, country}) => 
  <li>{name} - {age} - {country}</li>

在这个例子中，我们首先使用React.useState()来初始化一个包含用户对象的users变量。 然后，我们编写了一个定时器来每秒钟增加每个用户的年龄。这个组件也定义了一个叫做UserList的子组件，用来渲染所有用户的列表，和User组件，每个user可作为一个列表项(li)进行处理。最后，我们在App组件中调用了UserList组件，并将上一步中声明的users数组传递给它。