创建方式

React推出的Hooks API其中的useEffect可以解决其没有生命周期的问题

useEffect

使用规则

• 1.[]里面是写的是被改变了的变量 如果变量值发生改变 那么就执行该函数
• 2.如何模拟将死的生命周期 在useEffect中返回值 那么这个组件在结束时就会运行返回的函数

实例的一个简单的函数组件的代码

function App() {
    const [n,setN] = React.useState(0)
    return (
        <div className='App'>
            <p>{n}</p>
            <p>
                <buttton onClick = {()=> setN(n+1)}></buttton>
            </p>
        </div>
    )
}
export default App

简单的useState的实现

• 1.setN会修改数据x，而不是直接修改数据n 将n+1存入x
• 2.set一定会触发<App/>会重新渲染
• 3.在重新渲染的过程中 useState会从x那里读出最新的n值

小结

• 1.每个函数组件对应一个React节点
• 2.每个节点保存的各自的不同的state和index
• 3.useState会读取state[index]
• 4.index由useState出现的顺序决定
• 5.setState会修改state并会触发更新（也就DOM diff 然后重新渲染 ）

基于每个不同的React节点每次保存的state和index都不一样(因为每次重新渲染 都是执行函数组件按）的解决方法

https://codesandbox.io/s/flamboyant-elion-jvtl2