React函数式组件值之useContext()和useReducer()

一、useContext

 　　useContext()的出现，方便了我们在组件之间的状态共享。

import React, { useContext } from "react";
import ReactDOM from "react-dom";
const TestContext= React.createContext({});
const Navbar = () => {
  const { username } = useContext(TestContext)
  return (
    <div className="navbar">
      <p>{username}</p>
    </div>
  )
}
const Messages = () => {
  const { username } = useContext(TestContext)
  return (
    <div className="messages">
      <p>1 message for {username}</p>
    </div>
  )
}
function App() {
  return (
  <TestContext.Provider 
    value={{
      username: 'superawesome',
    }}
  >
    <div className="test">
      <Navbar />
      <Messages />
    </div>
  <TestContext.Provider/>
  );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

二、useReducer

　　useReducer 类似 redux 中的功能，相较于 useState，它更适合一些逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等等的特定场景， useReducer 总共有三个参数

• 第一个参数是 一个 reducer，就是一个函数类似 (state, action) => newState 的函数，传入 上一个 state 和本次的 action
• 第二个参数是初始 state，也就是默认值，是比较简单的方法
• 第三个参数是惰性初始化，这么做可以将用于计算 state 的逻辑提取到 reducer 外部，这也为将来对重置 state 的 action 做处理提供了便利

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
function App() {
  const [state, dispatch] = useReducer(reducer, {count: 0});
  return (
    <>
      点击次数: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}