react hooks常见的坑

useEffect 包含了哪几个生命周期?

  • componentDidMount、componentDidUpdate 、 componentWillUnmount

useEffect 在生命时候执行?

  • useEffect会在第一次渲染之后和每次更新渲染之后都会执行,并且在DOM渲染结束之后执行

useEffect 死循环?

  • 说明useEffect在传入第二个参数时一定注意:第二个参数不能为引用类型,会造成死循环,比如 []===[] 为false,所以会造成useEffect会一直不停的渲染,因此把data的初始值改为undefined,就可以

函数作为依赖的时候死循环?

  • 提到组件外面,或者用useCallback包一层。useMemo 可以做类似的事情以避免重复生成对象。

子组件:

useEffect(() => {
  props.onChange(props.id)
}, [props.onChange, props.id])

父组件的onChange需要useCallback包一层:

const onChange = useCallback(() => {
   ...
  }, [])

useEffect 里面拿不到最新的props和state?

  • 使用refs
function Example() {
  const [count, setCount] = useState(0);
  const latestCount = useRef(count);

  useEffect(() => {
    // Set the mutable latest value
    latestCount.current = count;
    setTimeout(() => {
      // Read the mutable latest value
      console.log(`You clicked ${latestCount.current} times`);
    }, 3000);
  });
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容