10天学会React——属性，状态，事件，生命周期

React组件的属性、状态、事件和生命周期

大家好，我是技术小江。今天我们来学习React的 Day 2 内容，主要是深入学习React组件的属性和状态，以及如何使用事件来控制组件的行为。相信大家已经掌握了React的基础知识，现在我们来更加深入地学习一下React吧！

首先，我们来学习组件的属性和状态。组件的属性是指组件在被使用时传入的一些固定的值，这些值在组件的生命周期中不会发生变化。组件的状态则是指组件内部的一些数据，这些数据可以随着用户的交互或其他事件的发生而发生变化。React中，组件的属性可以通过this.props来访问，而组件的状态则可以通过this.state来访问。

那么，我们接下来就来学习如何定义组件的属性和状态。在定义组件时，我们可以通过constructor()方法来初始化组件的状态，代码如下：

//旧代码

import React from "react";

class Hello extends React.Component {
    render() {
      return (
        <div>
          <h1>你好世界!</h1>
        </div>
      );
    }
  }

 export default Hello

//新代码
import React from "react";
class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '世界'
    };
  }
  render() {
    return (
      <div>
        <h1>你好, {this.props.greeting} {this.state.name}!</h1>
      </div>
    );
  }
}

 export default Hello      

在新代码中，我们定义了一个名为“Hello”的组件，并初始化了它的状态为{name: '世界'}。在组件的render()方法中，我们使用了JSX语法来渲染组件的UI界面，并在其中使用了组件的属性和状态来显示“你好世界!”这个文本。在这个例子中，我们使用了this.props.greeting来获取传入组件的greeting属性，并使用this.state.name来获取组件内部的name状态。

接下来，我们来学习如何使用事件来控制组件的行为。在React中，我们可以通过定义事件处理函数来响应用户的交互事件，比如点击按钮、输入文本等。定义事件处理函数的方法有两种：一种是使用ES6的箭头函数，另一种是使用类的方法定义。在这里，我们演示使用ES6的箭头函数来定义事件处理函数，代码如下：

import React from "react";

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '世界'
    };
    this.handleNameChange = this.handleNameChange.bind(this);
  }

  handleNameChange(event) {
    this.setState({name: event.target.value});
  }

  render() {
    return (
      <div>
        <h1>Hello,{this.state.name}!</h1>
        <input type="text" value={this.state.name} onChange={this.handleNameChange} />
      </div>
    );
  }
}

 export default Hello      

在这段代码中，我们定义了一个名为“Hello”的组件，并定义了一个名为handleNameChange的事件处理函数，用于响应输入框的文本变化事件。在组件的render()方法中，我们使用了input元素来渲染输入框，并使用了value属性来绑定组件的name状态，并使用onChange事件来响应输入框的文本变化事件。在handleNameChange事件处理函数中，我们使用了setState()方法来修改组件的name状态，并触发组件的重新渲染。

最后，我们来看一下React组件的生命周期。在React中，组件的生命周期可以分为三个阶段：挂载、更新和卸载。在挂载阶段，React会调用组件的constructor()、getDerivedStateFromProps()、render()和componentDidMount()方法；在更新阶段，React会调用组件的getDerivedStateFromProps()、shouldComponentUpdate()、render()、getSnapshotBeforeUpdate()和componentDidUpdate()方法；在卸载阶段，React会调用组件的componentWillUnmount()方法。

下面是一个简单的React组件生命周期的例子：

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'World'
    };
    console.log('constructor');
  }

  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps');
    return null;
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shouldComponentUpdate');
    return true;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate');
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('componentDidUpdate');
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render');
    return (
      <div>
        <h1>Hello, {this.props.greeting} {this.state.name}!</h1>
      </div>
    );
  }
}      

对应的控制台输出如下,可以看到生命周期的执行顺序

//控制台输出
Hello.js:9 constructor
Hello.js:13 getDerivedStateFromProps
Hello.js:13 getDerivedStateFromProps
Hello.js:40 render
Hello.js:40 render
Hello.js:32 componentDidMount
Hello.js:36 componentWillUnmount
Hello.js:32 componentDidMount      

好了，今天的React学习内容就到这里了。希望大家能够掌握React组件的属性和状态，以及如何使用事件来控制组件的行为，并深入了解React组件的生命周期。明天我们将会学习React的Day 3内容，敬请期待！