一个查看 react 生命周期的网站
React 的请求应该放在哪个生命周期中?
React 的异步请求到底应该放在哪个生命周期里,有人认为在
componentWillMount 中可以提前进行异步请求,避免白屏,其实这个观点是有问题的.
由于 JavaScript 中异步事件的性质,当您启动 API 调用时,浏览器会在此期间返回执行其他工作。
当 React 渲染一个组件时,它不会等待 componentWillMount 它完成任何事情-React 继续前进并继续
render,没有办法“暂停”渲染以等待数据到达。
而 且 在 componentWillMount 请 求 会 有 一 系 列 潜 在 的 问 题 , 首 先 , 在 服 务 器 渲 染 时 , 如 果 在
componentWillMount 里获取数据,fetch data 会执行两次,一次在服务端一次在客户端,这造成了多余
的请求,其次,在 React 16 进行 React Fiber 重写后,componentWillMount 可能在一次渲染中多次调
用.
目前官方推荐的异步请求是在 componentDidmount 中进行.
如果有特殊需求需要提前请求,也可以在特殊情况下在 constructor 中请求:
react 17 之后 componentWillMount 会被废弃,仅仅保留 UNSAFE_componentWillMount
setState 到底是异步还是同步?
先给出答案:有时表现出异步,有时表现出同步
1、setState 只在合成事件和钩子函数中是“异步”的,在原生事件和 setTimeout 中都是同步的
2、setState 的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是
合成事件和钩子函数的调用顺序在更新之前,导致在合成事件和钩子函数中没法立马拿到更新后
的值,形成了所谓的“异步”,当然可以通过第二个参数 setState(partialState,callback)中的 callback 拿
到更新后的结果
3、setState 的批量更新优化也是建立在“异步” (合成事件、钩子函数)之上的,在原生事件和
setTimeout 中不会批量更新,在“异步”中如果对同一个值进行多次 setState,setState 的批量更新策
略会对其进行覆盖,取最后一次的执行,如果是同时 setState 多个不同的值,在更新时会对其进行
合并批量更新
React 组件通信如何实现?
React 组件间通信方式:
1、父组件向子组件通讯:父组件可以向子组件通过传 props 的方式,向子组件进行通讯
2、子组件向父组件通讯:props+回调的方式,父组件向子组件传递 props 进行通讯,此 props 为作
用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到父
组件的作用域中