1、setState(newState,callback)

React中可以通过修改state，通知React进行Update的方法
callback用途，接收更新后的state，可以继续操作

一般情况下是一个异步方法
但是在定时器以及原生DOM事件会是一个同步方法

异步方法的好处
setState设计为异步，可以显著的提升性能；
如果每次调用setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
最好的办法应该是获取到多个更新，之后进行批量更新；
如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；
state和props不能保持一致性，会在开发中产生很多的问题；

在调用setState后直接使用新的state是不建议的
this.setState({id:'123'});
console.log(this.state.id) // 这时候id不一定是 123

应该写成
this.setState({id:'123'},(state)=>{
console.log(state.id) // 这时候 id===123
})

异步变同步(不推荐)

class MyComponent extend React.Component{

  constructor(){
    this.state={
      id:'haha'
    }
  }

  componentDidMount(){
    document.getElelemtnById('btn').addEventListener('clcik',()=>{
      this.setState({id:'123'});
      console.log(this.state.id) // 这时候id是 123
    })
  }

updateWithsetTimeout = ()=>{
  setTimeOut(()=>{
    this.setState({id:'123'});
    console.log(this.state.id) // 这时候id是 123
  },0)
}

render(){
  return (
    <>
      <button onClick={this.updateWithsetTimeout}>setTimeOut</button>
      <button id="btn">js function </button>
    </>
  )
}
}

2、受控组件

在React 中，可变状态（mutable state）通常保存在组件的state 属性中，并且只能通过使用setState()来更新。
我们将两者结合起来，使React的state成为“唯一数据源”；
渲染表单的React 组件还控制着用户输入过程中表单发生的操作；
被React 以这种方式控制取值的表单输入元素就叫做“受控组件”；
由于在表单元素上设置了value属性，因此显示的值将始终为this.state.value，这使得React 的state 成为唯一数据源。
由于handleUsernameChange在每次按键时都会执行并更新React 的state，因此显示的值将随着用户输入而更新。

class FormComponent extends React.Component{
  constructor(){
    this.state = {
      inputValue:'',
    }
  }

  onChange = (e) =>{
    const value = e.target.value;
    this.setState({inputValue:value});
  }

  render(){
    return (
      <input type="text" value={this.state.inputValue} onChange={this.onChange} />
    )
  }
}

3、非受控组件

如果要使用非受控组件中的数据，那么我们需要使用ref来从DOM节点中获取表单数据
在非受控组件中通常使用defaultValue来设置默认值

class FormComponent extends React.Component{

  constructor(){
    this.inputRef = React.createRef();
  }

  onBtnClick = () =>{
    console.log(
      `input - ${this.inputRef.current.value}`
    );
  }

  render(){
    return (
      <>
        <input defaultValue="haha" ref={this.inputRef} />
        <button onClick={this.onBtnClick}>确定</button>
      </>
    )
  }
}

4、高阶组件

至少满足以下条件之一：
接受一个或多个函数作为输入；
输出一个函数；

高阶组件的英文是Higher-Order Components，简称为HOC；
官方的定义：高阶组件是参数为组件，返回值为新组件的函数；

我们可以进行如下的解析：
首先，高阶组件本身不是一个组件，而是一个函数；
其次，这个函数的参数是一个组件，返回值也是一个组件；

function higherOrderComponent(component){
  class Component extends React.Component{
    render (){
      {/* 需要将接收的props进行向下传递 */}
      return <component {...this.props}/>
    }
  }
  Component.displayName = "EnhancedComponent";
  return Component;
}
const EnhancedComponent = higherOrderComponent(WarppedComponent);

应用场景一：props 增强
1、不改变原有代码情况下，扩增props react-redux的connect就是这个作用
2、利用高阶组件进行Context共享(减少业务组件在使用时对Context.Consumer 编写不友好的问题)

应用场景二：渲染判断鉴权
加一层判断，控制组件是否渲染

应用场景三：生命周期劫持
虚空增加的一层父组件，可以在原需要组件进行渲染的时候，根具特定的生命周期进行一些类似于热点、渲染时间、错误边界捕获等记录。

HOC的意义

我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理。
其实早期的React有提供组件之间的一种复用方式是mixin，目前已经不再建议使用：
Mixin可能会相互依赖，相互耦合，不利于代码维护
不同的Mixin中的方法可能会相互冲突pMixin非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性

当然，HOC也有自己的一些缺陷：

HOC需要在原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这让调试变得非常困难；
HOC可以劫持props，在不遵守约定的情况下也可能造成冲突；

Hooks的出现，是开创性的，它解决了很多React之前的存在的问题
比如this指向问题、比如hoc的嵌套复杂度问题等等；

5、Portals的使用

通常来讲，当你从组件的render方法返回一个元素时，该元素将被挂载到DOM节点中离其最近的父节点：
Portals提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的方案
ReactDOM.createPortal(child, container)
第一个参数（child）是任何可渲染的React 子元素，例如一个元素，字符串或fragment；
第二个参数（container）是一个DOM元素；

即使child子元素被挂载到其他DOM结点下，只是DOM级挂载，但是在Fiber树上，它仍属于原Parent结点的子节点。

现象级挂载
  就是从HTML代码结构上可以看到是确实被挪移到目标结点下
  目标结点通过添加事件监听，也能捕获child子元素对应冒泡的事件
仍属于Parent原结点
  1、仍然可以使用Context,不脱离作用域范围。
  2、在父结点上添加的React事件(onClick)，在子节点上发生时事件时，仍能被冒泡捕获到。
  3、但是通过elemnt.addEventListener 这种方式就不能再捕获对应事件！因为DOM元素真的被移走了！

    <Parent onClick>
      <Portal>
        <Button />
      </Portal>
    </Parent>

即使这里的Portal被移动到其他DOM结点下，当点击Button时，仍能被Parent的onClick事件所捕获

代码地址

React-setState、HOC、Portal简单介绍