React Hooks(二) useEffect

紹介

useEffect は、React が DOM を更新した後に追加のコードを実行します。つまり、データのリクエスト、サブスクリプションの設定、React コンポーネントの DOM の手動変更などの副作用操作を実行します。

2つの使い方

useEffect(() => {
    
    
  // 相当于 componentDidMount、componentDidUpdate
  console.log("code");
  return () => {
    
    
    // 相当于 componentWillUnmount
    console.log("code");
  }
}, [/*依赖项*/])

関数と配列は useEffect で定義され、2 番目のパラメーターは useEffect のコードの各部分の実行時間を決定します。
1. 依存関係のいくつかの状況:

何も渡さない場合は、コンポーネントの各レンダリング後に useEffect が呼び出されます。これは、componentDidMount およびcomponentDidUpdate に相当します。
useEffect の関数に状態データの変更が含まれる場合、 useEffect が無限に呼び出されることになることに注意してください。
空の配列 [] を渡すと、一度だけ呼び出されます。これは、componentDidMount と同等です。
変数を含む配列を渡します。変数が変更された場合にのみ、useEffect が実行されます。

注:
実際には、機能コンポーネントにはライフサイクルはありません。クラスコンポーネントのライフサイクルの概念を適切な場所に移動することは、単に記憶を助けるだけです。
2. リターン関数
useEffect に監視イベントやタイマーがある場合は、対応する監視イベントやタイマーを閉じる必要があります。

3つの音符

1. 依存関係が参照型の場合、React は依存関係のメモリアドレスが一致しているかどうかを比較します。矛盾がある場合にのみ、useEffect が実行されます。

const [a, setA] = useState({
    
    
    b: 'dx',
    c: '18',
})

const changeA = () => {
    
    
    setA((old) => {
    
    
        old.b = 'yx'
        return old
    })
 }

/**当changeA执行却没有打印 a*/
useEffect(() => {
    
    
	console.log(a)
},[a])

一般的な変更方法は、参照を変更することです。

const [a, setA] = useState({
    
    
	b: 'dx',
	c: '18',
})

const changeA = () => {
    
    
    setA((old) => {
    
    
        const newA = {
    
    ...old}
        newA.b = 'yx'
        return newA 
    })
}


/**当changeA执行打印  {b:'yx',c:'18'}  */
useEffect(() => {
    
    
    console.log(a)
},[a])

2. useEffect の例を見てください。

import React, {
    
     useState, useEffect } from 'react'
function App() {
    
    
  const [count, setCount] = useState(0) //默认值是0
  const [name, setName] = useState('张三') //默认值是0
  const [size, setsize] = useState({
    
    
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight,
  })
  const onResize = () => {
    
    
    setsize({
    
    
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
    })
  }
  //操作
  useEffect(() => {
    
    
    document.title = count
  }) //没有第二个参数就表示只要函数渲染就都执行
  
  useEffect(() => {
    
    
    //监听
    window.addEventListener('resize', onResize, false)
    //监听完了就考虑卸载,卸载的时候必须是return
    return () => {
    
    
      window.addEventListener('resize', onResize, false)
    }
  }, [])
  //空数组里面要是什么也不填写,那他只会发生在第一次渲染后和组件卸载之前执行
  // 也就是钩子函数componentDidMount 和componentWillUnMount
  
  useEffect(() => {
    
    
    console.log('count', count)
  }, [count])
  //只有count发生变化时候执行,和第一次渲染后以及组件卸载前执行

  useEffect(() => {
    
    
    document
      .querySelector('#size')
      .addEventListener('click', handleClick2, false)
    return () => {
    
    
      document
        .querySelector('#size')
        .removeEventListener('click', handleClick2, false)
    }
  })
  const handleClick2 = () => {
    
    
    console.log('点击了')
  }
  function handleClick() {
    
    
    setCount(count + 1)
    setName('李四')
  }

  return (
    <div>
      <span>
        {
    
    count}---{
    
    name}
      </span>
      {
    
    count % 2 === 0 ? (
        <span id="size">
          宽度是:{
    
    size.width}--高度是:{
    
    size.height}
        </span>
      ) : (
        <p id="size">
          宽度是:{
    
    size.width}--高度是:{
    
    size.height}
        </p>
      )}

      <button type="button" onClick={
    
    handleClick}>
        点击
      </button>
    </div>
  )
}

export default App

紹介

2つの使い方

3つの音符

おすすめ