react系列-HOOKS-UseEffect
UseEffect
useEffect 是进行批量顺序执行的。
如果两个连着的 useEffect 则是会顺序执行。
test demo：
const { useEffect, useState } = React;
const TestComponent = ({
parentConfig
}) => {
const [ isShow, setIsShow ] = useState(false);
const [ config, setConfig ] = useState({});
useEffect(() => {
setConfig(parentConfig)
setIsShow(false)
console.log('first: ', isShow, parentConfig)
}, [parentConfig])
useEffect(() => {
setIsShow(Object.keys(config).length > 0)
console.log('second: ', isShow)
}, [config])
useEffect(() => {
console.log('update isShow: ', isShow, '=========')
}, [isShow])
console.log('render TestComponent');
return (
isShow && <div>test</div>
)
}
function App() {
const [ parentConfig, setParentConfig ] = useState({a: 1});
console.log('render App')
return (
<div className="App">
<button onClick={() => setParentConfig(Object.keys(parentConfig).length > 0 ? {} : {a: 1})}>
switch parentConfig
</button>
<TestComponent parentConfig={parentConfig} />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);