Hooks useState useEffect

 

 

 

import React, { useState,useEffect } from 'react'
function Hook() {
    数组第一项相当于state中的数据
    数组第二项是改变当前数组第一项的setstate的方法 setName('老朱')直接传入修改的数据
    useState() 里面可以传任意的初始化的值
    let [name,setName] = useState('小朱')
    let [age, setAge] = useState(()=>{
        return 22 //惰性求值。在修改的时候，这个函数不会再修改了
    })
    return (
    <div>
      <span>{name}</span>
      <button
        onClick={() => {
          setName('老朱')
          setAge(22)
        }}
      ></button>
    </div>
    )
}

 

useEffect给函数组件增加了执行副作用操作的能力。

数据获取，设置订阅以及手动更改React组件中的DOM都属于副作用

 

import React, { useState, useEffect } from 'react'
function A() {
  let [name, setName] = useState(() => {
    return '老朱'
  })
  useEffect(() => {
     console.log('hook执行了')
     setName('老朱')
     //避免内存泄漏
     return ()=>{
         //这里相当于页面卸载阶段
        //在这里清除所有的副作用，销毁后这里面的问题,比如说上面加的定时器，组件销毁后还在执行
     }
  }, [name]) //这里的[]可以放置监听项，只要有变化，都会执行一次，第一次初始化的时候也会执行
  []传空数组则不会重复执行 状态依赖 
  return <div>{name}</div>
}