React函数式编程Hook之useState，useEffect

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

Hook为我们解决了哪些问题

1. 在以往的函数式编程中涉及到组件状态更改的我们都不能使用函数式组件。函数式组件一般只用于一些简单的交互，用作信息展示。如果需要交互，更改状态等复杂逻辑时就需要使用class组件了，hook的出现让我们更好的拥抱函数式编程，让函数式组件也能使用state功能。
2. 副作用
   我们一般称数据获取、订阅、定时执行任务、手动修改
   ReactDOM这些行为都可以称为副作用，由于React Hooks的出现，我们可以使用useEffect来处理，组件副作用问题，所以我们的函数式组件也能进行副作用逻辑的处理了
3. 有状态的逻辑重用组件
4. 复杂的状态管理
   之前我们使用redux、dva、mobx第三方状态管理器来进行复杂的状态管理，现在我们可以使用useReducer、useContext配合使用，实现复杂状态管理，不再依赖第三方状态管理器
5. 开发效率和质量问题
   函数式组件比class组件简洁，开发的体验更好，效率更高，同时应用的性能也更好

新特性学习之useState

userState是组件状态管理的钩子，能使函数组件使用state。基本的使用语法如下

const [ state,setState ] = useState( initState )

state:需要设置的状态
setState:更新状态的方法，这只是一个方法名，可以随意更改
initState：state的初始值，可以是随意的数据类型，也可以是回调函数，但是函数必须是有返回值的

简单计数器例子

import React, { useState } from 'react'

const App = () =>{
    const [count,setCount]=useState(0)
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={()=>setCount(count+1)}>+</button>
            <button onClick={()=>setCount(count-1)}>-</button>
        </div>
    )
}
export default App;

简单文本改变例子

import React, { useState } from 'react'

const App = () =>{
    const [context,setContext]=useState('这是文本')
    return (
        <div>
           <h1>{context}</h1>
           <button onClick={()=>{setContext('我改变了文本内容哦')}}>点击更改</button>
        </div>
    )
}
export default App;

新特性之useEffect

useEffect:副作用处理钩子

副作用：数据获取、订阅、定时执行任务、手动修改ReactDOM这些行为都可以称为副作用。
useEffect就是为了处理这些副作用而生的。

useEffect也是componentDidMount，componentDidUpdate，componentWillUnmount这几个生命周期方法的统一。

基本语法使用如下:

useEffect( callback , array )

callback:回调函数，作用是处理副作用逻辑

useEffect(() =>{
 //副作⽤逻辑
 xxxxxx
 return ()=>{
 //清理副作⽤需要清理的内容
 //类似于componentWillUnmount，组件渲染和组件，卸载前执⾏的代码
 }
 },[])

callback可以返回⼀个函数，⽤作清理
array(可选参数)：数组，⽤于控制useEffect的执⾏，分三种情况

• 空数组，则只会执⾏⼀次（即初次渲染render）,相当于componentDidMount
• 非空数组，useEffect会在数组发⽣改变后执⾏
• 不填array这个数组，useEffect每次渲染都会执⾏

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

const App = () =>{
    const [count,setCount]=useState(0)
    //空数组情况只会渲染一次
    useEffect(() => {
        console.log(`您点击了${count}次`)
        return () => {
           
        }
    },[])
    return (
        <div>
            <h1>{count}</h1>
            <button onClick={()=>setCount(count+1)}>+</button>
            <button onClick={()=>setCount(count-1)}>-</button>
        </div>
    )
}
export default App;

1. 空数组情况，无论我点击了多少次，也只会执行第一次，相当于componentDidMount：
   

2. 不填array这个数组，每次都变化都会被渲染

 useEffect(() => {
        console.log(`您点击了${count}次`)
        return () => {
        }
    })

3. 非空数组,useEffect会在数组发⽣改变后执⾏，count是正在变化的计数器的值，值变化后useEffect跟着改变而执行

//非空数组,useEffect会在数组发⽣改变后执⾏
    useEffect(() => {
        console.log(`您点击了${count}次`)
        return () => {}
    },[count])

大家可能会对于里面的return抱有疑问，这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分。 React 会在组件卸载的时候执行清除操作。正如之前学到的，effect 在每次渲染的时候都会执行。