- 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'));
