React 基础笔记(React使用Hooks-useeffect)(二十四)

useEffect 替代了声明周期,用于在什么时候执行

• useEffect 就是个函数,它内部需要传递的一个函数,里面写逻辑函数

• 没有第二个参数就表示只要组件渲染就执行

import React, { useState, useEffect } from 'react'
function App() {
  const [count, setCount] = useState(0) //默认值是0
  const [name, setName] = useState('张三') //默认值是张三
  function handleClick() {
    setCount(count + 1)
    setName('李四')
  }
  //操作,没有第二个参数就表示只要函数渲染就都执行
  useEffect(() => {
    document.title = count
  })
  return (
    <div>
      <span>
        {count}---{name}
      </span>
      <button type="button" onClick={handleClick}>
        点击
      </button>
    </div>
  )
}

export default App

• userEffect 有第二个参数 是一个空数组 它表示只是在初始渲染和组件删除前执行

• 也就是钩子函数 componentDidMount 和 componentWillUnMount

• 如果 useEffect 里面有 return 返回一个函数就表示用完了卸载

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.removeEventListener('resize', onResize, false)
    }
  }, [])
  //空数组里面要是什么也不填写,那他只会发生在第一次渲染后和组件卸载之前执行
  // 也就是钩子函数componentDidMount 和componentWillUnMount
  function handleClick() {
    setCount(count + 1)
    setName('李四')
  }

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

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

export default App

• userEffect 第二个参数填写了,那它只有在数组里面的值改变的时候执行

• 还有在 componentDidMount 和 componentWillUnMount

• 如果里面的元素存在动态添加渲染,则 useEffect 必须有 return 添加删除事件

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