创建方式
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
