useContext

• props和useContext的区别：useContext可以很方便的跨越多个层级共享state，props需要一层层传递

import React, { useContext } from 'react';
import ReactDOM from 'react-dom';
import { useState } from 'react';

const PersonContext = React.createContext();
const { Provider } = PersonContext;

const Grandson = () => {

  const info = useContext(PersonContext); // 无论隔了多少层级，都可以通过useContext获取到顶层的state

  return (
    <>
      <span>My family name is {info.familyName}. I am grandson. My assets is : {info.income}</span>
    </>
  );

}

const Son = () => {
  return (
    <>
      <span>I am son</span>
      <br />
      <Grandson></Grandson>
    </>
  );
}

const App = () => {

  const [info, setInfo] = useState({
    income: 1000000,
    familyName: 'wang'
  });

  const onClickGrand = () => {
    setInfo(x => ({ 
      ...x,
      income: x.income + 1000
    }));
  }

  return (
    <Provider value={info}>
      <button onClick={onClickGrand}>grandfather</button>
      <br />
      <Son></Son>
    </Provider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));