React入门进阶——组件开发与生命周期

2023-09-25 20:01:16

大家好，我是L同学，继续上一篇文章《React入门进阶——JSX使用》，本文将带大家了解React中组件开发与生命周期。

组件开发

1. 函数式组件

函数式组件是一种无状态的组件，它接收props（属性）并返回一个React元素。

const MyComponent = (props) => {
  return <h1>{props.title}</h1>;
};

2. 类组件

类组件是有状态的组件，它继承自React.Component，并具有以下方法：

constructor(props) ：组件的构造函数，用于初始化state（状态）和绑定方法。
render() ：返回一个React元素，该元素决定了组件的UI。
componentDidMount() ：组件首次挂载后调用，通常用于异步数据请求或设置定时器。
componentWillUnmount() ：组件卸载前调用，通常用于清除定时器或取消订阅。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <button onClick={() => this.setState({ count: this.state.count + 1 })}>点击</button>;
  }

  componentDidMount() {
    console.log('组件已挂载');
  }

  componentWillUnmount() {
    console.log('组件已卸载');
  }
}

组件生命周期

组件的生命周期是一个非常重要的概念，它定义了组件在其整个生命中经历的阶段。下面是React组件生命周期的各个阶段：

1. 挂载阶段

componentWillMount() ：在组件挂载之前调用，仅在客户端调用一次。
componentDidMount() ：在组件首次挂载后调用，通常用于异步数据请求或设置定时器。

2. 更新阶段

componentWillReceiveProps(nextProps) ：在组件将要接收新props时调用。
shouldComponentUpdate(nextProps, nextState) ：在组件接收新props或state时调用，返回一个布尔值，表示组件是否需要更新。
componentWillUpdate(nextProps, nextState) ：在组件将要更新之前调用。
componentDidUpdate(prevProps, prevState) ：在组件更新后调用。