react文档阅读笔记（二）

以你之姓@ 2021-12-09 06:07 227阅读 0赞

### 1.State & 生命周期 ###

封装时钟

### 将函数转换为类 ###

你可以通过5个步骤将函数组件 `Clock` 转换为类

1.  创建一个名称扩展为 `React.Component` 的[ES6 类][ES6]
2.  创建一个叫做`render()`的空方法
3.  将函数体移动到 `render()` 方法中
4.  在 `render()` 方法中，使用 `this.props` 替换 `props`
5.  删除剩余的空函数声明

`Clock` 现在被定义为一个类而不只是一个函数

使用类就允许我们使用其它特性，例如局部状态、生命周期钩子

## 为一个类添加局部状态 ##

我们会通过3个步骤将 `date` 从属性移动到状态中：

1.  在 `render()` 方法中使用 `this.state.date` 替代 `this.props.date`

class Clock extends React.Component {
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

1.  添加一个[类构造函数][Link 1]来初始化状态 `this.state`

class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }
    
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

注意我们如何传递 `props` 到基础构造函数的：

constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }

类组件应始终使用`props`调用基础构造函数。

1.  从 `<Clock />` 元素移除 `date` 属性：

ReactDOM.render(
      <Clock />,
      document.getElementById('root')
    );

稍后将定时器代码添加回组件本身。

结果如下：

## 将生命周期方法添加到类中 ##

它将使用 `this.setState()` 来更新组件局部状态：

class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }
    
      componentDidMount() {
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }
    
      componentWillUnmount() {
        clearInterval(this.timerID);
      }
    
      tick() {
        this.setState({
          date: new Date()
        });
      }
    
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <Clock />,
      document.getElementById('root')
    );

[在 CodePen 中尝试][CodePen]

现在时钟每秒钟都会执行。

让我们快速回顾一下发生了什么以及调用方法的顺序：

1.  当 `<Clock />` 被传递给 `ReactDOM.render()` 时，React 调用 `Clock` 组件的构造函数。 由于 `Clock` 需要显示当前时间，所以使用包含当前时间的对象来初始化 `this.state` 。 我们稍后会更新此状态。
2.  React 然后调用 `Clock` 组件的 `render()` 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 `Clock` 的渲染输出。
3.  当 `Clock` 的输出插入到 DOM 中时，React 调用 `componentDidMount()` 生命周期钩子。 在其中，`Clock` 组件要求浏览器设置一个定时器，每秒钟调用一次 `tick()`。
4.  浏览器每秒钟调用 `tick()` 方法。 在其中，`Clock` 组件通过使用包含当前时间的对象调用 `setState()` 来调度UI更新。 通过调用 `setState()` ，React 知道状态已经改变，并再次调用 `render()` 方法来确定屏幕上应当显示什么。 这一次，`render()` 方法中的 `this.state.date` 将不同，所以渲染输出将包含更新的时间，并相应地更新DOM。
5.  一旦`Clock`组件被从DOM中移除，React会调用`componentWillUnmount()`这个钩子函数，定时器也就会被清除。

## 正确地使用状态 ##

关于 `setState()` 这里有三件事情需要知道

例如，此代码不会重新渲染组件：

// Wrong
    this.state.comment = 'Hello';

应当使用 `setState()`:

// Correct
    this.setState({comment: 'Hello'});

构造函数是唯一能够初始化 `this.state` 的地方。

### 状态更新可能是异步的 ###

因为 `this.props` 和 `this.state` 可能是异步更新的，你不应该依靠它们的值来计算下一个状态。

例如，此代码可能无法更新计数器：

// Wrong
    this.setState({
      counter: this.state.counter + this.props.increment,
    });

要修复它，请使用第二种形式的 `setState()` 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数：

// Correct
    this.setState((prevState, props) => ({
      counter: prevState.counter + props.increment
    }));

上方代码使用了[箭头函数][Link 2]，但它也适用于常规函数：

// Correct
    this.setState(function(prevState, props) {
      return {
        counter: prevState.counter + props.increment
      };
    });

###  状态更新合并 ###

当你调用 `setState()` 时，React 将你提供的对象合并到当前状态。

例如，你的状态可能包含一些独立的变量：

constructor(props) {
        super(props);
        this.state = {
          posts: [],
          comments: []
        };
      }

你可以调用 `setState()` 独立地更新它们：

componentDidMount() {
        fetchPosts().then(response => {
          this.setState({
            posts: response.posts
          });
        });
    
        fetchComments().then(response => {
          this.setState({
            comments: response.comments
          });
        });
      }

这里的合并是浅合并，也就是说`this.setState({comments})`完整保留了`this.state.posts`，但完全替换了`this.state.comments`。

## 数据自顶向下流动 ##

这通常被称为`自顶向下`或`单向`数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中`下方`的组件。

# 事件处理 #

React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:

如何绑定事件呢

方法一

当你使用 [ES6 class][ES6] 语法来定义一个组件的时候，事件处理器会成为类的一个方法。

class Toggle extends React.Component {
      constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
    
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
        }));
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
          </button>
        );
      }
    }
    
    ReactDOM.render(
      <Toggle />,
      document.getElementById('root')
    );

方法二

使用属性初始化器来正确的绑定回调函数：

class LoggingButton extends React.Component {
      // This syntax ensures `this` is bound within handleClick.
      // Warning: this is *experimental* syntax.
      handleClick = () => {
        console.log('this is:', this);
      }
    
      render() {
        return (
          <button onClick={this.handleClick}>
            Click me
          </button>
        );
      }
    }

方法三

可以在回调函数中使用 [箭头函数][Link 2]：

class LoggingButton extends React.Component {
      handleClick() {
        console.log('this is:', this);
      }
    
      render() {
        // This syntax ensures `this` is bound within handleClick
        return (
          <button onClick={(e) => this.handleClick(e)}>
            Click me
          </button>
        );
      }
    }

使用这个语法有个问题就是每次 `LoggingButton` 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

## 向事件处理程序传递参数 ##

通常我们会为事件处理程序传递额外的参数。例如，若是 `id` 是你要删除那一行的 id，以下两种方式都可以向事件处理程序传递参数：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
    <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的，分别通过 [arrow functions][] 和 [`Function.prototype.bind`][Function.prototype.bind] 来为事件处理函数传递参数。

[ES6]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
[Link 1]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor
[CodePen]: http://codepen.io/gaearon/pen/amqdNA?editors=0010
[Link 2]: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions
[arrow functions]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
[Function.prototype.bind]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind