标签：count 状态 函数 hooks 初始值 React 详解 useState 组件

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

hook 是react 16.8的新增特性 ，他可以让你不在编写class的情况下shiystate以及react的特性 Hooks的出现，首先解决了以下问题：

1. 告别了令人疑惑的生命周期
2. 告别类组件中烦人的this
3. 告别繁重的类组件，回归到了熟悉的函数组件

react 整个思想上面的转变，从“面向对象”的思想转为“函数式变成”，所以你会突然发现会多了一些新概念 比如：纯函数，副作用，柯里化，高阶函数等概念  

useState 

 

 1.基础使用

import { useState } from 'react'
function App() {
    // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
    // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
    const [count, setCount] = useState(0);
    //   修改count内容
    const modifyEvent = () => {
        setCount(count + 1)
    }
    return (
        <button onClick={() => modifyEvent()}>{count}</button>
    )
}
export default App

 

 2.状态的读取和修改执行流程与逻辑

　　读取状态：该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用 　　修改状态：

　　　　1.setCount是一个函数，参数表示最新的状态值

　　　　2.调用该函数后，将使用新值替换旧值

　　　　3.修改状态后，由于状态发生变化，会引起试图变化 注意

　　事项：修改状态的时候，一定要使用新的状态替换旧的状态，不能直接修改旧的状态，尤其是引用类型

 

3. 组件的更新过程

　　函数组件使用 useState hook 后的执行过程，以及状态值的变化

　　1.组件第一次渲染

• 从头开始执行该组件中的代码逻辑
• 调用 useState(0) 将传入的参数作为状态初始值，即：0
• 渲染组件，此时，获取到的状态 count 值为： 0

　　2.组件第二次渲染

• 点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染
• 组件重新渲染时，会再次执行该组件中的代码逻辑
• 再次调用 useState(0) ，此时 React 内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为 1
• 再次渲染组件，此时，获取到的状态 count 值为：1

注：useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说，以后的每次渲染，useState 获取到都是最新的状态值，React 组件会记住每次最新的状态值 

import { useState } from 'react'
 
function App() {
  const [count, setCount] = useState(0)
  // 在这里可以进行打印
  console.log(count,'渲染了')
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

 4.使用规则

　　1.useState 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态

function List(){
  // 以字符串为初始值
  const [name, setName] = useState('cp')
  // 以数组为初始值
  const [list,setList] = useState([])
}

　　2.useState 注意事项

• 只能出现在函数组件或者其他hook函数中
• 能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）

 

useEffect

            未完成待续。。。              

标签：count,状态,函数,hooks,初始值,React,详解,useState,组件
From： https://www.cnblogs.com/Allen-project/p/17712607.html