我希望当我在父组件的输入中写入内容时，组件更新。我希望在useEffects中2组件的执行顺序是=>1.结束子节点2。孩子3。结束父节点4。父元素，但结果是=>1.结束子节点2。结束父节点3。孩子4。家长为什么是结果呢?
function App() {
return (
<div className="App">
<Container/>
<Parent/>
</div>
);
}
function Parent(){
const [first,setfirst] =useState('');
const [second,setsecond] =useState('');
function final(e){
setsecond(e.target.value);
}
function func(e){
setfirst(e.target.value);
}
useEffect(()=>{
console.log('parent'); //4
return ()=>{console.log('end parent')} //3
},[first,second])
return (
<>
<h1>I am parent</h1>
<input style={{border:"1px solid black"}} value={first} onChange={(e)=>{func(e)}}/>
<input style={{border:"1px solid black"}} value={second} onChange={(e)=>{final(e)}}/>
{
first.length < 7 ? <Testeffect fistargument={first} secondargument={second}/> : <h1>lorem ipsum dolor</h1>
}
</>
)
}
function Testeffect({fistargument,secondargument}){
const [extra,setextra] = useState(0);
const [force,setforce] =useState(0);
useEffect(()=>{
console.log('child'); //2
return ()=>{console.log('end child')} //1
},[extra,force,fistargument,secondargument])
return (
<>
<h1 onClick={()=>{setextra(extra+1)}}>{fistargument}</h1>
<h1 onClick={()=>{setforce(force+1)}}>{secondargument}</h1>
</>
)
}
export default App;
>
子组件的useEffect在父组件之前被调用。在代码示例中，父进程首先开始呈现，然后是子进程。子进程在父进程之前完成渲染，所以它的useEffect钩子首先被调用，然后是父进程的useEffect钩子。
是的，有一种方法可以在使用uselayouteeffect的子元素之前在父元素中运行效果。
useLayoutEffect:在浏览器有机会绘制之前，useLayoutEffect同步运行。
和useEffect钩子一样，uselayouteeffect钩子允许你执行副作用，如API调用，设置订阅和手动在函数组件中操作DOM。
虽然React会同时触发useEffect和uselayouteeffect在执行DOM更新时，uselayouteeffect在浏览器以同步方式绘制这些更新供用户查看在浏览器绘制这些更新后调用useEffect，异步.
因此，浏览器无法绘制任何浏览器更新，直到useLayoutEffect运行。出于这个原因，你将主要使用useEffect，在浏览器中向用户显示加载器之类的东西副作用正在发生。
然而，在一些情况下，我们想要运行侧在向我们的用户显示更新之前，先执行并更新DOM。我们可以使用以下语法的uselayouteeffect来实现。
你可以在这里查看整个博客和一些编码示例