React 基础知识学习

Props（属性）和 State（状态）

1.1 Props（属性）

Props 属性用于把父组件的中的数据或者方法传递给子组件，供子组件使用，他是一个简单的结构对象。在子组件的生命周期内是不可改变的。

1.2 State（状态）

State 是组件的内部状态，State 的变化最终将反应到组件的 UI 变化上，通常是在组件的 constructor 中通过 this.state 定义组件的初始状态，通过 this.setState 来改变组件的状态。

1.2.1如何判断变量是否属于state

变量是否通过props获取，如果是那么它不是 state
变量是否在整个生命周期内保持不变，如果是那么它不是 state
这个变量是否通过其他的state或者props计算得到，如果是那么它不是 state
这个变量是否在render中使用，如果不是，如果是那么它不是 state

1.2.2 使用state 注意事项

不能通过 this.state.{val} 来修改值，必须通过 this.setState 来改变组件的状态。
state的更新是异步的
this.setState 的更新是一个合并的过程，我们只需要传入发生改变的 state 即可。

2 组件的定义

组件是react的核心概念，将应用的 UI 拆分成独立的、可复用的模块，React 应用是由一个个组件搭建而成。

定义一个组件有两种方式，使用Class （类组件）和使用函数（函数组件）。

2.1 Class 类组件

类组件的定义需要满足以下两个条件

class 继承自 React.Component
class内部必须定义 render 方法，返回代表该组件的 UI 的 React 元素。

import React, { Component } from 'react';

class Text extends Component {
  render() {
    return (
      
    )
  }
}

2.2 有状态组件和无状态组件

state 是用来反映组件内部状态的变化，如果一个组件内容的状态是不可变的，我们就不需要使用state，这样的组件称为无状态组件。反之，我们称为有状态组件。

无状态组件除了可以使用 class 来定义，也可以使用函数定义，也就是函数组件。如下

funtion Welcome (props) {
    return Hello, {props.name} ;
}

在使用无状态组件时，应该尽量将其定义成函数组件。无状态组件的使用不需要关心状态的变化，只聚焦UI的展示，无状态组件更容易被复用。

3 组件的生命周期

组件的生命周期分为三个阶段：挂载阶段、更新阶段和卸载阶段

3.1 挂载阶段

组件执行初始化被创建，并被挂载到 Dom 中，完成组件的第一次渲染，依次执行以下方法

(1) constructor
(2) componentWillMount
(3) render
(4) componentDidMount

constructor

class 的构建方法，组件被创建时，首先会调用该方法，接收一个props参数，props默认是从父组件中传入的属性对象，如果父组件没有传入，props 指向的为组件的默认属性。需要优先调用 super(props) 才能保证 props 被传入组件中。

该方法通常还用于 state 初始化和绑定事件处理方法等。

componentWillMount

该方法在组件被挂载 Dom 之前被调用，只会被调用一次，在该方法中调用 this.setState 不会引起组件的重新渲染。一般很少使用。

render

定义组件的唯一必须方法，返回一个 UI 的描述，本身并不渲染 UI，真正的渲染出页面 DOM 工作由 React 自身负责。

componentDidMount

组件被挂载到 DOM 后调用，只会被调用一次。该方法常用于网络请求，在该方法中调用this.setState 会引起组件的重新渲染。

3.2 更新阶段

组件被挂载到 Dom后，组件的 props 或者 state 引起的组件更新。

props 引起的组件更新本质上是由渲染该组件的父组件引起的，当父组件的render方法被调用时，无论子组件的props是否发生变化，都会导致组件的更新。

state引起的组件更新是通过调用 this.setState 来触发的

(1) componentWillReceiveProps
(2) shouldComponentUpdate
(3) componentWillUpdate
(4) render
(5) componentDidUpdate

componentWillReceiveProps（nextProps）

该方法只会在props引起的组件更新时被调用，nextProps 是父组件传递的最新 props。nextProps 的值可能和当前的 props 是一致的。因此需要比较两者来决定是否需要更新。

shouldComponentUpdate（nextProps, nextState）

该方法决定是否需要继续执行更新。由返回值true和false控制。一般通过比较 nextProps、nextState 和当前组件的 props、state 来决定是否需要更新。从而达到一些性能优化。

componentWillUpdate （nextProps, nextState）

该方法在执行render之前调用，可在组件更新前执行某些工作，很少用到。

componentDidUpdate（prevProps, prevState）

组件更新完成后被调用。prevProps、prevState 代表组件更新前的 props、state 。

3.3 卸载阶段

这个过程只有一个方法

(1) componentWillunmount

执行一些清理工作例如定时器等，防止引起内存泄漏