搜索

学习react


发布时间: 2022-11-24 19:14:00    浏览次数:45 次

模块化

export (导出)

  • 导出用来决定一个模块中哪些内容可以被外部查看
  • 导出分成两种默认导出和命名导出
  • 1、默认导出 export default xxx;
  • 一个模块中只能有一个默认导出
  • 2、命名导出
  • export const x = xxx;

import(导入)

  • 导入用来将外部模块中内容导入到当前模块中
  • 1、导入默认模块 import xxx from "xxx";
  • 导入默认模块时,变量名可以自主指定,无需和模块中的变量名对应
  • 在网页中导入模块时,模块的路径必须写完整(./或../开头,扩展名也得写上)
  • 2、命名导入 import { xxx,xxx} from "xxx"

class 类

  • 类中的所有代码都会在严格模式下执行,严格模式下其中一个特点就是,函数的 this 不在是 window,而是 undefined
  • 在类中方法的 this 不是固定的;以方法形式调用时,this 就是当前的实例;以函数形式调用,this 是 undefined
  • 在开发时,在有些场景下,我们希望方法中的 this 是固定的,不会因调用方式不同而改变
  • 如果遇到上述需求,可以使用箭头函数来定义类中的方法
  • 如果类中的方法是以箭头函数定义的,则方法中的 this 恒为当前实例,不会改变
  • this.xxx = this.xxx.bind(this); // 将 xxx 方法的 this 绑定为当前实例

继承

  • 使用 extends 来继承一个类,继承后就相当于将该类的代码复制到了当前类中
  • 当我们使用继承后,被继承的类就称为父类,继承父类的类称为子类
  • 子类继承父类后,将获得父类中所有的属性和方法,也可以创建同名的属性或方法来对父类进行重写
  • class xxx extends xxx {}
  • 当在子类中重写父类构造函数时,必须在子类构造函数中第一时间调用父类构造函数,否则会报错
  • constructor() { super() // 调用父类构造函数 }
  • 使用 static 开头的属性是静态属性,方法是静态方法
  • 静态方法 this 不是实例对象而是当前的类对象

react

三个 API

React.createElement()

  • 用来创建 React 元素
  • React 元素无法修改

ReactDOM.createRoot()

  • 获取跟元素

  • 用来创建 React 的根容器,容器用来放置 React 元素

root.render()

  • 将元素在根元素中显示

  • 用来将 React 元素渲染到根元素中

  • 根元素中所有的内容都会被删除,被 React 元素所替换

  • 当重复调用 render()时,React 会将两次的渲染结果进行比较

  • 他会确保只修改那些发生变化的元素,对 DOM 做最少的修改

JSX

  • JSX 就是 React.createElement()的语法糖
  • JSX 在执行之前都会被 babel 转换为 js 代码

state

  • state 实际就是一个被 React 管理的变量, 当我们通过 setState()修改变量的值时,会触发组件的自动重新渲染

  • 只有 state 值发生变化时,组件才会重新渲染

  • 当 state 的值是一个对象时,是用新对象替换旧对象

  • 当通过 setState 去修改一个 state 时,并不表示当前的 state,它修改的是组件下一次渲染时 state 值

  • setState()会触发组件的重新渲染,它是异步的,所以当调用 setState()需要用旧 state 的值时,一定要注意有可能出现计算错误的情况,为了避免这种情况,可以通过为 setState()传递回调函数的形式来修改 state

  • 改值

    const newObj = Object.assign(target: {},obj)
    newObj.name = "xxx"
    setUser(newObj)
    
  • setUser({...user,name: "xxx"})

useRef() 获取原生 dom 对象

  • 慎用
  • 1、创建一个存储 DOM 对象的容器 使用 useRef()钩子函数
  • const xxx = useRef() // 创建一个容器

  • 钩子函数的注意事项:

  • (1)、React 中的钩子函数只能用于函数组件或自定义钩子

  • (2)、钩子函数只能直接在函数组件中调用

  • 2、将容器设置为想要获取 DOM 对象元素的 ref 属性

  • <div ref={xxx}></div>

  • useRef() 返回的就是一个普通的 js 对象,所以我们直接创建一个 js 对象,也可以代替 useRef()

  • 区别: 我们创建的对象,组件每次重新渲染都会创建一个新对象;而 useRef()创建的对象,可以确保每次渲染获取到的都是同一个对象

  • 当你需要一个对象不会因为组件的重新渲染而改变时,就可以使用 useRef();

类组件

  • webstrom 中的快捷方式:

  • rsc 函数组件(不带 props)

  • rsi 函数组件(带 props)

  • rcc 类组件

  • 类组件中 state 统一存储到实例对象的 state 属性中,可以通过 this.state 来访问,通过 this.setState()对其进行修改

  • 当我们通过 this.setState()修改 state 时,React 只会修改设置了的属性,仅限于直接存储在 state 中的属性

  • xxx = React.createRef() // 创建属性存储 DOM 对象

portal

  • portal 可以将组件渲染到页面中的指定位置
  • ReactDOM.createPortal(jsx,目标位置 DOM 元素)

create-react-app

  • npx creat-react-app 项目名

  • npm run eject 不可逆 设置 webpack

  • xxx.module.css // css 的模块

  • import xxx from "./xxx.module.css"; // 引入

  • css 模块可以动态的设置唯一的 calss 值

移动端

  • 设置移动端的适配
  • 除以几视口的宽度就是多少 rem,设置视口的总宽度为 750rem
  • document.documentElement.style.fontSize = 100 / 750 + 'vw'

Context

  • 不同组件间共享数据的方式。

  • Context 相当于一个公共的存储空间,我们可以将多个组件中都需要访问的数据统一存储到一个 Context 中,这样无需通过 props 逐层传递,即可使组件访问到这些数据

  • 通过 React.createContext()创建 context

  • store 文件夹存放数据

  • xxx.js 文件

    import React from 'react';
    
    const TestContext = React.createContext({
      name: '张三',
      age: 18
    })
    export default TestContext;
    

组件 A

  • 使用方式一

  • 1、引入 context

  • 2、使用 XXX.Consumer 组件来创建元素

  • Consumer 的标签体需要一个回调函数,它会将 context 设置为回调函数的参数,通过参数就可以访问到 context 中存储的数据

  • Consumer 消费者

    import TestContext from "./xxx";
    <TestContext.Consumer>
      {(ctx) => {
        return <div>{ctx.name} - {ctx.age}</div>
      }}
    </TestContext.Consumer>
    

组件 b

  • 使用 Context 方式二;

  • 1、导入 Context

  • 2、使用钩子函数 useContext()获取到 context

  • useContext()需要一个 Context 作为参数

  • 它会将 Context 中数据获取并且作为返回值返回

  • Xxx.Provider

  • 表示数据的生产者,可以使用它来指定 Context 中的数据

  • 通过 value 来指定 Context 中存储的数据,

  • 这样一来,在盖组件的所有的子组件中都可以通过 Context 来访问它所指定数据。

  • 当我们通过 Context 访问数据时,读取离他最近的 Provider 中的数据,

  • 如果没有 Provider,则读取 context 中的默认数据

    import TestContext from "./xxx";
    // 使用钩子函数获取Context
    const ctx = useContext(TestContext);
    <div>{ctx.name} ---{ctx.age}</div>
    
  • 阻止冒泡:e.stopPropagation();

  • 字体图标:fontawesome

  • React Developer Tools

useEffect

  • Effect 副作用

  • Too many re-renders

  • 当我们直接在函数体中调用 setState 时,就好触发上述错误

  • setState()的执行流程(函数组件)

  • setCount() ===>dispatchSetDate()

  • 会先判断,组件当前处于什么阶段

  • 如果是渲染阶段--->不会检查 state 值是否相同

  • 如果不是渲染阶段--->会检查 state 的值是否相同

  • 如果值不相同,则对组件进行重新渲染

  • 如果值相同,则不对组件进行重新渲染

  • 如果值相同,React 在一些情况下会继续执行当前组件的渲染,但是这个渲染不会触发其子组件的渲染,这次渲染不会产生实际的效果

  • 这种情况通常发生在值第一次相同时

  • useEffect()是一个钩子函数,需要一个函数作为参数

  • 这个作为参数的函数,将会在组件渲染完毕后执行

  • 在 useEffect()可以传递一个第二个参数

  • 第二个参数是一个数组,在数组中可以指定 Effect 的依赖想

  • 指定后,只有当依赖发生变化时,Effect 才会被触发

  • 通常会将 Effect 中使用的所有的局部变量都设置为依赖项

  • 这样一来可以确保这些值发生变化时,会触发 Effect 的执行

  • 如果依赖项设置了一个空数组,则意味 Effect 只会在组件初始化时触发一次

  • 降低数据过滤的次数,提高用户体验,

  • 用户输入完了在过滤,用户输入的过程中,不用过滤

  • 当用户停止输入动作 1 秒后,我们才做查询

  • 在开启一个定时器的同事,应该关掉上一次

    useEffect(() => {
      const timer = setTimeout(() => {
      },1000)
    
      // 在Effect的回调函数中,可以指定一个函数作为返回值
      // 这个函数可以称其为清理函数,塔会在下次Effect执行钱调用
      // 可以在这个函数中,做一些工作来清除上次Effect执行所带来的影响
      return () => {
        clearTimeout(timer)
      }
    },[xxx])
    

useReducer

  • 可以对 state 进行整合的工具,翻译为“整合器”

  • useReducer(reducer,initialArg,init)

  • 参数:reducer 整合函数,对于我们当前 state 的所有操作都应该在该函数中定义,该函数作为返回值,会成为 state 的新值

  • reducer 在执行时,会收到两个参数

  • state: 当前最新的 state

  • action 它需要一个对象,在对象中会存储 dispatch 所发送的指令

  • initialArg: state 的初始值,作用和 useState()中的值是一样

  • 返回值 ---> 数组:

  • 第一个参数,state 用来获取 state 的值

  • 第二个参数,state 修改的派发器,通过派发器可以发送操作 state 的命令,具体的修改行为将会由另外一个函数(reducer)执行

  • const [count,countDispatch] = useReducer( (state,action) => { return state},1)

  • 可以根据 action 中不同的 type 来执行不同的操作

  • countDispatch({})

  • 为了避免 reducer 会重复创建,通常 reducer 会定义到组件的外部

      const xxx = (state, action) => {
        switch (action.type) {
          default:
            return state;
          case xxx:
            return xxx;
        }
      }
    

React.memo

  • React.memo(Index)

  • React.memo()是一个高阶组件

  • 它接收另一个组件作为参数,并且会返回一个包装过的新组件

  • 包装过的新组件就会具有缓存功能

  • 包装过后,只有组件的 props 发生变化时才会触发组件的重新渲染,否则总是返回缓存中结果

  • 对函数缓存

useCallback()

  • useCallback 是一个钩子函数,用来创建 React 中的回调函数

  • useCallback 创建的回调函数不会总在组件重新渲染时重新创建

  • useCallback() 参数

  • 1、回调函数

  • 2、依赖数组

  • 当依赖数组中的变量发生变化时,回调韩式才会重新渲染

  • 如果不指定依赖数组,回调函数每次都会重新创建

  • 一定要将回调函数中使用到的所有变量都设置成依赖项除了(setState)

      const onAdd = useCallback(() => {
        xxx
      },[])
    

Strapi

  • npm 安装
  • npx create-strapi-app@latest demo --quickstart
  • yarn
  • yarn create strapi-app demo --quickstart

Fetch API

  • fetch 浏览器自带

  • featch() 用来向服务器发送请求加载数据,是 Ajax 的升级版

  • 它需要两个参数:1、请求地址 2、请求信息(可省略)

      fetch('xxx')
      .then((res) => {
        // 判断是否正常返回响应信息
        if(res.ok) {
          // response 表示响应信息
          return res.json(); // 该方法可以将响应的json直接转换为js对象
        }
        // 代码运行到这里,说明没有成功加载数据
        // 抛出一个错误
        throw new Error('数据加载失败!')
      })
      .then(data => {
      })
      .catch((err) => {
        // catch中的回调函数,用来统一处理错误
        // catch 一执行,说明上述代码出错了
    
      })
    

await

useEffect(() => {
  const fetchData = async () => {
    try {
    const res = await featch('xxx');
      if(res.ok) {
        const data = await res.json();
      }else {
      throw new Error('数据加载失败!')
      }
    }catch(e) {
    }finally {
    }
  }
  fetchData();
},[])

Redux

  • 状态管理器

  • 状态(state)

  • 容器(Container)

  • 可预测(Predictable)

  • subscribe (订阅)

  • dispatch (派发)

  • 网页中使用 redux 的步骤:

  • 1、引入 reduxh 核心包

  • 2、创建 reducer 整合函数

  • 3、通过 reducer 对象创建 store

  • 4、对 store 中的 state 进行订阅

  • 5、通过 dispatch 派发 state 的操作指令

      const subBtn = document.getElementById('sub');
      const addBtn = document.getElementById('add');
      const countSpan = document.getElementById('countSpan')
    
      function reducer(state,action) {
        <!-- state表示当前state,可以根据这个state生成新的state
        action是一个js对象,它里边会保存操作的信息 -->
        switch (action.type) {
          case "ADD":
            return state + 1;
          case "SUB":
            return state -1;
          default:
            return state;
        }
      }
      const store = Redux.createStore(reducer,1);
      store.subscribe(() => {
        countSpan.innerText = store.getState();
    
      })
      subBtn.addEventListener('click',() => {
        stroe.dispatch({type: 'SUB'})
      })
      addBtn.addEventListener('click',() => {
        store.dispatch({type: 'ADD'})
      })
    

Redux Toolkit(RTK)

  • Redux 工具包

  • npm 安装

  • npm install react-redux @reduxjs/toolkit -S

  • yarn 安装

  • yarn add react-redux @reduxjs/toolkit

  • store/index.js

      // 使用RTK来构建store
      import { configureStore } from "@reduxjs/toolkit";
      import { stuReducer } from "./stuSlice";
      import { schoolReducer } from "./schoolSlice";
      // 创建store 用来创建store 对象,需要一个配置对象作为参数
      const store = configureStore({
        reducer: {
          student: stuReducer,
          school: schoolReducer
        }
      })
      export default store;
    
  • store/schoolSlice.js

      // 创建学校的slice
      import { createSlice } from "@reduxjs/toolkit";
      const schoolSlice = createSlice({
        name: 'school',
        initialState: {
          name: '花果山一小',
          address: "花果山大街28号"
        },
        reducers: {
          setName: (state,action) {
            state.name = action.payload;
          },
          setAddress(state,action) {
            state.address = action.payload;
          }
        }
      })
      export const { setName, setAddress } = schoolSlice.actions;
      export const { reducer: schoolReducer } = schoolSlice;
    
  • store/stuSlice.js

      // createSlice 创建reducer的切片
      // 它需要一个配置对象作为参数,通过对象的不同属性来指定它的配置
      import { createSlice } from "@reduxjs/toolkit";
      const stuSlice = createSlice({
        name: 'stu', // 用来自动生成action中的type
        initialState: {
          name: '孙悟空'.
          age: 18,
          gender: '男',
          address: '花果山'
        }, //  state的初始值
        reducers: { // 指定state的各种操作,直接在对象中添加方法
          setName(state, action) {
            // 可以通过不同的方法来指定对state的不同操作
            // 两个参数,state这个state的是一个代理对象,可以直接修改
            state.name = action.payload;
          },
          setAge(state, action) {
            state.age = action.payload;
          }
        }
      })
      // 切片对象会自动的帮助我们生成action
      // actions中存储的是slice自动生成action创建器(函数),调用函数后会自动创建action对象
      // action对象的结构 {type:name/函数名,payload: 函数的参数}
      export const { setName, setAge } = stuSlice.actions;
      export const { reducer: stuReducer } = stuSlice;
    
  • App.js

      import React from "react";
      import { useDispatch, useSelector } from "react-redux";
      import { setName, setAge } from "./store/stuSlice";
      import { setName as setSchoolName, setAddress as setSchoolAddress } from "./store/schoolSlice";
      const App = () => {
        // useSelector() 用来加载state中的数据
        // const student = useSelector(state => state.student);
        // 引入学校的state
        // const school = useSelector(state => state.school);
        const [ student,school ] = useSelector(state => state);
        // 通过useDispatch()来获取派发器对象
        const dispatch = useDispatch();
        // 获取action的构建器
        const setNameHandler = () => {
          dispatch(setName('沙和尚'))
        }
        const setAgeHandler = () => {
          dispatch(setAge(33))
        }
        return (
          <div>
            <p>{student.name} ---{student.age} --- {student.gender} --- {student.address}</p>
            <button onClick={setNameHandler}>修改name</button>
            <button onClick={setAgeHandler}>修改age</button>
            <p>{school.name} --- {school.address}</p>
            <button onClick={() => dispatch(setSchoolName('高老庄中小'))}>修改学校名字</button>
            <button onClick={() => dispatch(setSchoolAddress('高老庄19号'))}>修改学校地址</button>
          </div>
        )
      }
    
  • index.js

      import ReactDOM from "react-dom/client";
      import App from "./app";
      import { Provider } from "react-redux";
      import store from "./store";
    
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(
        <Provider store={store}>
          <App />
        </Provider>
      )
    

RTKQ

  • RTK Query
  • store\studentApi.js

    import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/dist/query/react";
    // 创建Api对象
    // createApi() 用来创建RTKQ中的API对象
    // RTKQ的所有功能都需要通过该对象来进行
    // createApi()需要一个对象作为参数
    const studentApi = createApi({
      reducerPath: "studentApi", // Api的标识,不能和其他的API或reducer重复
      baseQuery: fetchBaseQuery({
        baseUrl: 'https:xxxx/api/'
      }),// 指定查询的基础信息,发送请求使用的工具
      endpoints(build) {
        // build是请求的构建器,通过build来设置请求的相关信息
        return {
          getStudents: build.query({ // 删除/新增/编辑改成mutation
            query() {
              // 用来指定请求子路径
              return "xxx";
            },
            // transformResponse 用来转换响应数据的格式
            transformResponse(baseQueryReturnValue, meta, arg) {
              return baseQueryReturnValue.data
            },
            keepUnusedDataFor: 0, // 设置数据缓存的时间,单位:秒 默认60S
          })
        }
      } // endpoints 用来指定Api中的各种功能,是一个方法,需要一个对象作为返回值
    })
    // Api对象创建后,对象中会根据各种方法自助的生成对应的钩子函数
    // 通过这些钩子函数,可以来想服务器发送请求
    // 钩子函数的命名规则 getStudents --> useGetStudentsQuery
    export const { useGetStudentsQuery } = studentApi;
    export default = studentApi;
    
  • store/index.js

    import { configuerStore } from "@reduxjs/toolkit";
    import studentApi from "./studentApi";
    const store = configureStore({
      reducer: {
        [studentAPi.reducerPath]: studentApi.reducer
      },
      middleware: getDefaultMiddleware =>
        getDefaultMiddleware().concat(studentApi.middleware)
    });
    setupListeners(store,dispatch); // 设置以后,将会支持 refetchOnFocus 和refetchOnReconnect
    export default store;
    
  • App.js

    import React from "react";
    import { useGetStudentsQuery } from "./store/studentApi";
    const App = () => {
      // 调用Api查询数据
      // 这个钩子函数它会返回一个对象作为返回值,请求过程中相关数据都在该对象中存储
      const { data, isSuccess, isLoading } = useGetStudentsQuery(); // 调用Api中的钩子查询数据
      return (
        <div>
          { isLoading && <p>数据加载中</p>}
          { isSuccess && data.data.map(item => <p key={item.id}>
            {item.attributes.name}
          </p>)}
        </div>
      )
    }
    
  • index.js

      import ReactDOM from "react-dom/client";
      import App from "./app";
      import { Provider } from "react-redux";
      import store from "./store";
    
      const root = ReactDOM.createRoot(document.getElementById('root'));
      root.render(
        <Provider store={store}>
          <App />
        </Provider>
      )
    

useQuery 的返回值

  • 返回对象
  • currentData: undefined // 当前参数的最新数据
  • data: undefined // 最新的数据
  • isError: false // 布尔值,是否有错误
  • error: Error() // 对象,有错时才存在
  • isFetching: true // 布尔值,数据是否在加载
  • isLoading: true // 布尔值,数据是否第一次加载
  • isSuccess: false // 布尔值,请求是否成功
  • isUninitialized: false // 布尔值,请求是否还没有开始发送
  • refetch: f() // 一个函数,用来重新加载数据
  • status: "pending" // 字符串,请求的状态

useQuery 的参数

  • useQuery 可以接收一个对象作为第二个参数,通过该对象可以对请求进行配置
  • selectFromResult: result => { return result; } // 用来指定 useQuery 返回的结果
  • pollingInterval: 0, // 设置轮询的间隔,单位毫秒 如果为 0 则表示不轮询
  • skip: false, // 设置是否跳过当前请求,默认 false
  • refetchOnMountOrArgChange: false, // 设置是否每次都重新加载数据 false 正常使用缓存 true 每次都重载数据 数字,数据缓存的时间(秒) 默认是 false
  • refetchOnFocus: false , // 是否在重新获取焦点时重载数据 默认 false
  • refetchOnReconnect: false, // 是否在重新连接后重载数据 默认 false

React Router

  • Router 版本 5
  • npm 安装 npm install react-router-dom@5 -S
  • yarn 安装 yarn add react-router-dom@5
  • Link
  • NavLink
  • Prompt 组件(离开页面出现确认效果)
  • Redirect 组件(重定向)
  • Route V6

  • Routes V6 中新增的组件,作用和 Switch 类似,都是用于 Route 的容器,Routes 中 Route 只有一个会被匹配

  • 需要通过 element 来指定要挂载的组件

    <Routes>
      <Route path="/" element={<Home />}></Route>
    </Routes>
    
  • 可以使用 useParams()来获取参数

  • useLocation() 获取当前的地址信息

  • useMatch() 检查当前 url 是否匹配某个路由

  • 如果路径匹配,则返回一个对象,不匹配则返回 null

  • const match = useMatch('/about')

  • useNavigate() 获取一个用于跳转页面的函数

    const nav = useNavigate();
    const clickHandler = () => {
      nav('/about') // 只用push,会产生历史记录
      nav('/about', {replace: true}) // 使用replace不会产生新的记录
    }
    
  • 路由嵌套

  • App.js

      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="about" element={<About />}>
          <Route path="hello" element={<Hello />}></Route>
        </Route>
      </Routes>
    
  • About.js

      return (
        <>
          <Outlet />
        </>
      )
    
  • Outlet

  • Outlet 用来表示嵌套路由中的组件

  • 当嵌套路由中的路径匹配成功了,Outlet 则表示嵌套路由中的组件

  • 当嵌套路由中的路径没有匹配成功,Outlet 就什么都不是

  • Navigate 组件用来跳转到指定的位置

  • 默认使用 push 挑战

  • 可以加 replace 属性

      import { Navigate } from "react-router-dom"
      return(
        <>
          <Navigate to="/student" replace>
        </>
      )
    
import { NavLink } from "react-router-dom"

  <NavLink style={({isActive}) => {
    return isActive?  { backgroundColor: 'yellow'} : null
  }}  to="/home"></NavLink>

NeedAuth 组件

  • 登录权限

  • NeedAuth.js

      import React from "react"
      import { useSelector,useLocation } from "react-redux"
      import { Navigate } from "react-router-dom"
    
      const NeedAuth = props => {
        const auth = useSelector(state => state.auth);
        const location = useLocation();
        return auth.isLogged ? props.children : <Navigate to={"/login"} replace state={{preLocation: location}} />
      }
      export default NeedAuth;
    
  • App.js

      <Routes>
        <Route path={"/"} element={<HomePage />}></Route>
        <Route path={"profile"} element={<NeedAuth><ProfilePage /></NeedAuth>}>
        <Route path={"login"} element={<LoginPage />}>
      </Routes>
    
  • 跳转页面到之前的目录

      const location = useLocation();
      const form =  loaction.state?.preLocation?.pathname || "/";
      navigate(from,{replace: true})
    
  • redux 存储在内存中刷新后就不见了

useMemo

  • React 中自带的钩子函数

  • useState

  • useEffect

  • useContext

  • useReducer

  • useCallback

  • useRef

  • useMemo

  • useImperativeHandle

  • useLayoutEffect

  • useDebugValue (18.0 新增)

  • useDeferredValue(18.0 新增)

  • useTransition(18.0 新增)

  • useId(18.0 新增)

  • useSyncExternalStore(18.0 新增)

  • useInsertionEffect(18.0 新增)

      const result = useMemo(() => {
        function sum(a,b) {
          return a + b;
        }
      },[a,b])
    
  • useMemo 用来存储函数的执行结果

useImperativeHandle

  • 子组件通过 forwardRef 包装
    ,父组件可以拿到 ref
  • React.forwardRef()
  • 可以用来指定组件向外部暴露的 ref
  • useImperativeHandle 和 forwardRef 结合使用
  • useImperativeHandle 可以用来指定 ref 返回的值

      let inputRef = useRef();
      useImperativeHandle(ref,() => {
        //回调函数的返回值,会成为ref的值
        <!-- return 123; -->
        return {
          changeInpValue(val) {
            inputRef.current.value = val;
          }
        }
      })
    

useEffect

  • 组件挂载-->state 改变-->DOM 改变-->绘制屏幕-->useEffect

useInsertionEffect

  • 组件挂载--> state 改变-->useInsertionEffect-->DOM 改变-->绘制屏幕
  • 添加元素

useLayoutEffect

  • 使用场景不多
  • 组件挂载--> state 改变-->DOM 改变-->useLayoutEffect --> 绘制屏幕
  • 调整元素样式
  • 执行顺序 useInsertionEffect -- > useLayoutEffect -->useEffect

UseDebugValue

  • 使用场景不多

useDeferredValue

  • 设置 state 的延迟值
  • useDeferredValue 需要一个 state 作为参数,会为 state 创建一个延迟值
  • 当设置了延迟值后,每次 state 修改时都会触发两次重新的渲染
  • 这两次执行对于其他的部分没有区别,但是延迟值两次执行的值是不同的
  • 第一次执行时延迟值是 state 的旧值,第二次执行时,延迟值是 state 的新值
  • 延迟值,总是会比原版的 state,慢一步更新

useTransition

  • 使用 state 的优先级
  • startTransition 的回调函数中设置 setState 会让其他的 setState 生效后才执行
  • const [isPending,startTransition] = useTransition();

UseId

  • 生成一个 id,避免重名
  • const id = useId();
免责声明 学习react,资源类别:文本, 浏览次数:45 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 07:14:00。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/DCL1314/p/16915761.html