React hooks学习--“useState“

useState

1. useState的返回的数组成对出现,一一对应的"数据"(state)和"修改数据的方法"(setState).

2. 当使用方法修改数据状态后,函数体会整体重新执行,用最新的值渲染.

3. 将初始值交给参数,只在函数首次渲染时生效.

import {
    useState } from 'react'function Learn_useState
function Learn_useState () {
   
     const [count, setCount] = useState(0)
     return(
         <div className="App">
             {
   count}
         <button onClick={
   () => setCount(count + 1)}>+</button>
         </div>
     )
 }

5. setSrate可以传入方法,可以用来处理较复杂数据.

export default Learn_useState

import {
    useState } from "react";
// 复杂初始值的处理
//需求: 初始值 数值 50个成员对象
//总结: 给useState传递一个函数 在函数内部做数据运算 最后把运算结果return

const createList = () => {
   
  //计算
  //定义数组
  const _list = [];
    for (let i = 0; i < 50; i++) {
   
      _list.push({
   
        id: i,
        text: "Item" + i,
      });
    }
    return _list;
  };

function Learn_useState() {
   
	
  //createList方法中返回的_list作为useState的初始值.
  const [list, setList] = useState(createList);

  return (
    <div className="Learn_useState">
      <ul>
        {
   list.map((item) => (
          <li key={
   item.id}>{
   item.text}</li>
        ))}
      </ul>
    </div>
  );
}

6.React的比较机制会比较setState的引用,所以当想要改变state时需要改变值的引用才能引发页面更新.(浅拷贝,深拷贝)

import {
   useState} from 'react'
//复杂类型的修改问题

//react比较机制: 比较引用 如果引用不变 不会更新 只有引用发生了变化才会更新

function Learn_useState (){
   
    const [obj,setObj] = useState({
   
        name: 'name'
    })
    const changeObj = () => {
   
        //以下两行的写法,点击后页面无变化,原因是react的比较机制.(浅拷贝)
        // obj.n