React之组件、组件通信

        组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

一、函数（无状态）组件和类（有状态）组件

        在react hooks出来之前，函数组件只根据传入的props来展示视图，不涉及对state的操作，也没有生命周期函数，是没有副作用的纯函数。因此对于无状态的组件，建议使用函数式创建的方式。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

        在react hooks出来之前，涉及state的组件只能用class的方式。

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

        由于react hooks的出现，函数组件能够通过hooks方法成为有状态组件，再加上react推崇的函数式编程，因此建议都使用函数式的方式来创建组件。

两者的区别：

（1）状态管理：hooks出来之前，函数组件就是无状态组件，不能保管组件的状态，不能调用setState。（Hooks useState）

（2）生命周期：hooks出来之前，函数组件是没有生命周期的，因此生命周期都是来自React.Component。（Hooks useEffect）

（3）调用方式：函数组件的调用方式是直接调用即可，类组件的调用方式需要先new实例化，然后调用实例对象的render方法。

（4）获取渲染时的值：因为class组件中的this指向可以变化，因此可以通过this来获取到当前的不同值。

二、受控组件和非受控组件：针对表单而言

        表单元素如<input>、<textarea>通常自己维护了一个内部 state，能根据用户输入进行更新（这个state并不是我们说的this.state）。

        React 的可变状态一般保存在 state 中，只能通过 setState 更新。

        受控组件：将两者结合，react 的 state 和表单元素的值建立依赖关系，当表单内部有修改时，会通过 setState 更新外部的state。这种表单组件的状态由react的state控制的叫做受控组件。

        非受控组件： 表单组件的状态不受state控制。

三、组件通信的方式

1. 父组件 ==> 子组件

        Props：父组件通过props将数据传给子组件，子组件通过this.props使用。

2. 父组件 ==> 后代组件

        方法1：层层传递props。

        方法2：Context，当组件层级很深、需要处理一些具有“全局性质”的数据时。

Context：

对于UI主题、当前语言等属性，这些属性是许多组件都需要的，Context提供了一种在组件之间共享此类值的方式。

Context主要应用于很多不同层级的组件需要访问同样的一些数据，类似组件树向下广播，但这会使得组件的复用性变差。

const ThemeContext = React.createContext('dark');

// 在数据流的最上层组件使用，然后数据流下层的组件会自动应用该属性
<ThemeContext.Provider  value="dark">
    <Toolbar />    //子组件、后代组件无需再定义
</ThemeContext.Provider>

2. 子组件 ==> 父组件

        回调函数：子组件通过调用父组件传来的回调函数，实现将数据传给父组件。

4. 兄弟组件之间

        将数据源存放在父组件中，通过父组件做中间层，实现数据的互通。

5. 不太相关、较复杂的组件之间

        redux：全局状态的管理。