hooks组件传值

HOOKS组件传值

import React, { lazy, Component, createContext, useState, useContext, useEffect } from 'react';

var CountContext = createContext();

function Counter() {
  let count = useContext(CountContext)

  return (
    <div>
      {count}
    </div>
  )
}

function App() {
  const [counts, setCount] = useState(1)
  return (
    <div>
      <li>1212132321</li>
      <CountContext.Provider value={counts} >
        <Counter></Counter>
      </CountContext.Provider>
    </div>
  )
}


export default App;

useReducer使用方法

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数 。

useReduer语法

useReduer（函数，初始值） 函数中包括了state和action

function ReducerDemo() {
  const [count, dispatch] = useReducer((state, action) => {

    switch (action.type) {
      case 'add':
        return state + 1;
      case 'sub':
        return state - 1;
      default:
        return state;
    }
  }, 1)
  function addNum() {

    dispatch({
      type: 'add'
    })
  }
  function subNum() {
    dispatch({
      type: 'sub'
    })
  }
  return (
    <div>
      <h2>现在的数值是{count}</h2>
      <button onClick={addNum}>加数值</button>
      <button onClick={subNum}>减数值</button>
    </div>
  )
}