reactjs —— useEffect ：UI联动

原文：

https://www.react.express/hooks/useeffect

useEffect

By @msyleung

We use the useEffect hook for calling functions with side effects within our components.

API

The useEffect hook takes 2 arguments:

• callback - a function with side effects
• dependencies - an optional array containing dependency values

When our component function runs, the callback will be called if any dependencies have changed since the last time the component function ran.

Example

Here, we use useEffect to change the background color to blue when count is a multiple of 5. The callback is called every time the color changes, since color is listed as a dependency.

import React, { useState, useEffect } from 'react'

export default function App() {
  const [count, setCount] = useState(0)
  const color = count % 5 === 0 ? 'red' : 'blue'

  useEffect(() => {
    document.body.style.backgroundColor = color
  }, [color])

  return (
    <button
      onClick={() => {
        setCount(count + 1)
      }}
    >
      Click HERE to increment: {count}
    </button>
  )
}

　　

Undefined or empty dependency array

If the dependency array is empty or undefined, useEffect will have a different behavior.

• [] - the callback is called only once, right after the component renders for the first time
• undefined - the callback is called on every component render (every time the component function runs)

 

undefined dependencies

Here the dependency array is undefined, so our callback will run every time our component function runs, e.g. any time we click the button and useState tells our component to re-run.

import React, { useState, useEffect } from 'react'
import { render } from 'react-dom'

function randomColor() {
  return `#${Math.random()
    .toString(16)
    .substr(-6)}`
}

function App() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.body.style.backgroundColor = randomColor()
  })

  return (
    <button
      onClick={() => {
        setCount(count + 1)
      }}
    >
      Click HERE to increment: {count}
    </button>
  )
}

render(<App />, document.querySelector('#app'))

　　

Empty dependencies

Here the dependency array is empty, so our callback will only run once (and permanently set a page background color).

import React, { useState, useEffect } from 'react'
import { render } from 'react-dom'

function randomColor() {
  return `#${Math.random()
    .toString(16)
    .substr(-6)}`
}

function App() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.body.style.backgroundColor = randomColor()
  }, [])

  return (
    <button
      onClick={() => {
        setCount(count + 1)
      }}
    >
      Click HERE to increment: {count}
    </button>
  )
}

render(<App />, document.querySelector('#app'))