hook-useState

示例代码

import React ,{useState} from "react"

function Example(props){
    const [count,setCount]=useState(0)
    const [friut,setFriut]=useState("apple")
    const [name,setName]=useState(props.name)
    // 当你需要在组件里面添加state，就可以使用hook了
    // 1. 这里只是执行了初始化的state,如果props发生变化怎么操作。。
    
    let handelSetCount=function(){
        setCount(count+1)
    }

    //click之类的事件就可以这样写。 
    return (
        <>
            <p>You click {count} times</p>
            <button onClick={handelSetCount}>
                click me
            </button>
            <button onClick={()=>setFriut("banana")}>
                click me{friut}
            </button>
            <button onClick={()=>setName("nb")}>
                click me{name}-{props.name}
            </button>

        </>
    )
}
export default Example

注意

1 .setState 和上次相同的值，是不会触发组件渲染的
2 .useState 只会在初始化代码的时候执行一次,并不是每次渲染组件都会执行
3 .多个useState的情况

1 .设置多个useState的时候，每个添加的时候都是添加到一个数组里面
2 .删除和添加一个新的useState都是相当于对一个数组操作
3 .如果在运行时添加，减少，修改，if操作的话，那些顺序就会乱，所以是不能使用if的

4 .useState不会把新的state和旧的state进行合并，而是直接替换
5 .每次渲染都是独立的闭包

1 .每一次渲染都有自己的props和state
2 .每一次渲染都有自己的事件处理函数
3 .当点击更新状态的时候，函数组件都会重新被调用，那么每次渲染都是独立的，取到的值不会受后面操作的影响
function Counter2(){
  let [number,setNumber] = useState(0);
  function alertNumber(){
    setTimeout(()=>{
      // alert 只能获取到点击按钮时的那个状态
      alert(number);
    },3000);
  }
  return (
      <>
          <p>{number}</p>
          <button onClick={()=>setNumber(number+1)}>+</button>
          <button onClick={alertNumber}>alertNumber</button>
      </>
  )
}

//这个例子也可以用在这里

6 .函数式更新：如果新的state需要通过使用之前的state计算出，那么可以讲回调函数当作参数传递给setState,该回调函数接受之前的state,并返回一个更新后的值
7 .惰性初始化state

1 .initState 参数只会在组件初始化的渲染中起作用，后续渲染时会被忽略
2 .如果初始state需要通过复杂的计算获取，那么可以传入一个函数，在计算中返回初始值，这个函数只会在初始渲染的时候被调用
function Example(props){
    function initState(){
        return props.count
    }
    // 这个函数只会在初始渲染的时候执行一次，后续重新渲染组件时，该函数就不会再被调用

    let [count,setCount]=useState(initState)
    return (
        <>
           <p>{count}</p>
           <button onClick={()=>setCount(count+10)}>+</button>
           <button onClick={()=>setCount(10)}>setCounter</button>
        </>
    )
}

export default Example

性能优化

1 .Hook内部使用Object.is来比较新旧state是否相等
2 .和组件中的setState方法不同，如果你修改状态的时候，传的值没有发生变化，是不会重新渲染的
3 .setState不会自动合并更新对象，，只能自己写函数式的setState来实现，他走的是直接替换的操作

减少渲染次数

1 .默认情况：只要父组件状态变化了，子组件也会重新渲染
2 .一般优化：类组件，使用pureComponent 函数组件：使用react.memo,将函数组件传递给memo之后，就会返回一个新的组件，新组件的功能，如果接受的属性不变，就不会重新渲染函数
3 .在setState里面

1 .使用useState，每次更新都是独立的，也就是说每次更新都会生成一个新的值，即使使用了react.memo，也还是会重新渲染
2 .useMemo:组件内部进行优化，创建函数和依赖项作为参数传入useMemo,他仅会在某个依赖项改变的时候才重新计算memoized值，有助于避免每次渲染都进行高开销的计算
3 .useCallback:接收一个内联回调函数参数和一个依赖项数组，子组件依赖父组件的状态，useCallback会返回改回调函数的memoized版本，改回调函数仅会在某个依赖项改变时才会更新

设置state的两种方式

1 .setCount(c=>c+1) 函数传参的方式，c 此时是之前的count，返回的值替代count
2 .setCount(100) 直接传入一个新值 ，代替count

更新数组里面的对象的时候,对象一定要走Object.assign({},old,new)的操作,不然会是旧的对象,更新不到

数组类型好像可以直接修改数组导致变化,并不需要走set数组定义的时候留的函数

let [arr,setArr]=useState([{name:1},{name:2},{name:3}])

    function handleAdd(){
        arr[1]={name:1000}
        console.log(arr)
    }
//只是这么简单的操作,没有触发到下面的return的update操作,但是我的那种这样操作数组就会触发到reruen的render操作,现在确实是数据改变了
 {arr.map((e)=>{
                return <div>{e.name}</div>
            })}

1 .全部代码是这样:初步结论,直接改变数组的索引,其实是变了的,但是这个单独的操作不会触发下面的更新.但是一旦有别的操作触发了更新,新的数据就会被render渲染出去,setState之后也是会做diff.如果前后数据没有变化,那也不会render操作的
2 .

补充

1 .useState返回的是数组,而不是对象

1 .es6结构语法.数组的解构,对象的解构
const foo = ['one', 'two', 'three'];
const [red, yellow, green] = foo;
//可以重命名

const user = {
    id: 42,
    is_verified: true
};

const { id, is_verified } = user;
//不能重命名,而且必须和内部名字一样

2 .array的缺陷

1 .返回值强顺序,灵活性比较低
2 .返回的值基本都得使用，对于有些返回值不想使用的话代码看起来有些怪，比如只想用 setState, 就得这么写：const [, setState] = useState(false)
3 .返回的参数不能太多，否则处理上面 2 个场景会很麻烦

3 .总结

1 .自定义hook,如果两个参数以上.就返回object

4 .让Object行为像array一样

1 .让对象具有有interbale特性,可迭代性
2 .Symbol.iterable

useState位置的重要性

1 .选择把useState放在那里,就意味着在那里开辟了一个可能导致冲渲染的坑,所以useState的值一定要放到最小的组件里面,尽量不要往上层放.因为这个值变化,就会导致他同层的都会做变化

2 .导致的重渲染

const [hookState, setHookState] = useState({ num: 0 });
  return (
    <>
      <button onClick={() => setHookState({ num: 0 })}>
        {"<button onClick={() => setHookState({ num: 0 })}>"}
      </button>
      <p>
        {
          "Will cause a re-render since previous hookState !== new hookState, or {num: 0} !== {num: 0}"
        }
      </p>
      <code>{JSON.stringify({ hookState })}</code>
    </>
set相同的对象,值一样都会重渲染,这里是可以做cache的,useMemo

给出的优化是这样的:要解决此问题，请不要setHookState 在传递给它的状态与前一个状态非常相等时调用

function useNumState(defState){
  const [state, setState] = React.useState(defState)

  function smartSetState(newState){
    if(state.num !== newState.num){
      setState(newState)
    }
  }
  return [state, smartSetState]
}

//或者用这种钩子,但是完全没用啊,适用性太差了.难道对象不同还需要这里手动添加优化吗/这种set结构还是用immable这种数据结构吧

5 .这里比较方法是Object.is()

Object.is({name:111},{name:111})-false

6 .这种是父级元素重新渲染,不会影响子元素的情况


image.png
import * as React from "react";
import "./styles.css";

export default function Parent() {
  console.log("parent render");
  return (
    <div>
      <Child1>
        <Child2 />
      </Child1>
    </div>
  );
}

function Child1({ children }: any) {
  console.log("Child1 render");
  const [count, setCount] = React.useState(0);
  return (
    <div>
      {/* render parent view */}
      {children}
      <hr />
      <p>Child1 count: {count}</p>
      <button
        onClick={() => {
          // parent will not re-render for Child1 state change
          // Child2 will not re-render, too
          setCount(v => v + 1);
        }}
      >
        Child1 increment
      </button>
    </div>
  );
}

function Child2() {
  console.log("Child2 render");
  return <p>This is Child2</p>;
}

总结

1 .也就是说,实现组件嵌套,父子关系目前有俩种方式,一种是通过传入的props.children来预留位置显示,这样其实仅仅是他的父组件,子组件不是他创建的,所以他的渲染也不会导致子组件渲染
2 .第二种就是下面的情况,直接调用.不通过props传,这样的结果就是父组件渲染,子组件也是会渲染的.要注意这两种实现效果

import * as React from "react";
import "./styles.css";
function Child2() {
  console.log("Child2 render");
  return <p>This is Child2</p>;
}

function Child1() {
  console.log("Child1 render");
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <p>Child1 count: {count}</p>
      <button
        onClick={() => {
          setCount(v => v + 1);
        }}
      >
        Child1 increment
        <Child2 />
      </button>
    </div>
  );
}



export default function Parent() {
  console.log("parent render");
  return (
    <div>
      <Child1/>
      <Child2/>
    </div>
  );
}

区别

1 .hooks里面的setState与Class中最大的区别在于hooks里面的不会对多次setState进行合并操作

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,029评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,395评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,570评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,535评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,650评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,850评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,006评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,747评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,207评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,342评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,964评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2赞 349