简单说一说状态

在使用 React、Vue 这些框架的时，最大特点就是 data 驱动 UI，数据的改变视图的改变。明确了这一点，就可以讲一下这个特点需要哪些要素，核心内容是以下三个

• 初始化 state
• 获取和使用 state
• 改变 state

一、Vue 中的 state

在 Vue 中使用方式超级简单，仅仅专注 state 即可

• 在实例上的 data 函数（data 对象）中初始化 state
• 从实例上拿到 state 并使用
• 在实例上直接改变 state

  <template>
    <div @click="onClick">{{n}}</div>
  </template>
  <script>
  const vueModel = new Vue({
  data(){
      n: initialN
  },
  onClick(){
    console.log(this.n)
    this.n = newN
  }
  })
  </script>

二、React 的 class 组件

在 React 的 class 组件是这样用的，需要专注 state 和 setState

• 在实例上的 state 中初始化 state
• 从实例上拿到 state 并使用
• 在实例上通过 setState 改变 state

  class ReactModel extends Component{
    constructor(){
      this.state = {
        n: initialN
    }
  }
  onClick(){
      console.log(this.state.n)
    this.setState({n:newN})
  }
  render(){
      return <div onClick={this.onClick.bind(this)}>{this.state.n}</div>
  }
  }

三、React 的 function 组件

在 React 的 function 组件是这样用的，需要专注 useState、state、setState

• 使用 useState 函数初始化 state
• 在 useState 的返回值中拿到 state 并使用
• 在 useState 的返回值中拿到 setState 改变 state

  const ReactModel = ()=>{
  const [n,setN] = useState(initialN)
  const onClick = ()=>{
    console.log(n)
      setN(newN)
  }
  return <div onClick={onClick}>{n}</div>
  }

四、React 的 function 组件 + reducer

在 React 的 function 组件使用 reducer 时是这样用的，需要专注 useReducer、state、dispatch、reducer

• 使用 useReducer 函数初始化 state
• 在 useReducer 的返回值中拿到 state 并使用
• 在 userReducer 的返回值中拿到 dispatch 配合 reducer 改变 state

  const reducer = (state,action){
    switch(action.type){
      case 'setN': {
      return {
          ...state,
        n: action.n
      }
    }
  }
  }
  const ReactModel = ()=>{
  const [state,dispatch] = useReducer(reducer,{n:initialN})
  const onClick = ()=>{
    console.log(state.n)
    dispatch({type:'setN',n:newN})
  }
  }

五、说一说 React 的 function 组件

useState/useReducer：n 每次变
useMemo/useCallback：[m]变的时候 fn 变
useRef：永远不变

• React.memo 可以让组件减少不必要的渲染
• useMemo 可以减少不必要的函数或变量声明

「@浪里淘沙的小法师」