跨组件相关 hook

1.useReducer：类 redux 的 hook

// 重置状态逻辑
function init(initialCount) {
  return { count: initialCount };
}

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({ initialCount }) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({ type: "reset", payload: initialCount })}
      >
        Reset
      </button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

2.useContext:传递上下文状态

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee",
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222",
  },
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button
      style={{
        background: theme.background,
        color: theme.foreground,
      }}
    >
      I am styled by theme context!
    </button>
  );
}

3.简单模拟 redux

爷爷 :state:{"num1":0,"num2":0,"num3":0,"render":""}

儿子

孙子

num1 : 0

num2 : 0

num3 : 0

import React, { useReducer } from "react";
import DemoContext from "./DemoContext";
import App2 from "./App2";
const App = (props = {}) => {
  const initialState = { num1: 0, num2: 0, num3: 0, render: "" };
  const reducer = (state, action) => {
    // console.log('reducer' ,state,action)
    switch (action.type) {
      case "num1Add":
        return Object.assign(
          {},
          state,
          { num1: state.num1 + 1 },
          { render: action.payload }
        );
      case "num2Add":
        return {
          ...state,
          render: action.payload,
          num2: state.num2 + 1,
        };

      case "num3Add":
        return {
          ...state,
          render: action.payload,
          num3: state.num1 + state.num2,
        };
      case "numAdd":
        return {
          ...state,
          render: action.payload,
          num1: state.num1 + 2,
        };
      default:
        return state;
    }
  };
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div style={{ backgroundColor: "yellow", padding: 5 }}>
      爷爷 :<span>state:{JSON.stringify(state)}</span>
      <div>
        <button
          onClick={() => {
            dispatch({ type: "numAdd", payload: "爷爷render" });
          }}
        >
          num1 + 2
        </button>
      </div>
      {/* 传递状态 */}
      <DemoContext.Provider value={{ state, dispatch }}>
        <App2></App2>
      </DemoContext.Provider>
    </div>
  );
};

export default App;