React - 函数式组件中使用 createRef、Context

一、函数式组件中使用 createRef1、基本介绍在函数式组件中使用 createRef 是可行的createRef 本身不依赖类式组件所以函数式组件可以调用它但是不推荐createRef 有局限性它不会在重新渲染时保留即每次组件重新渲染createRef 都会创建全新的 ref 对象之前的引用会丢失useRef 可以在重新渲染时保留在类式组件中createRef 的结果作为实例属性只创建一次2、演示import { useState, useRef, createRef, useEffect } from react; export default function Demo() { const [count, setCount] useState(0); const myRef1 useRef(); const myRef2 createRef(); const add () { setCount(count 1); }; useEffect(() { console.log(window.myRef1, myRef1); console.log(window.myRef2, myRef2); console.log(window.myRef1 myRef1); console.log(window.myRef2 myRef2); window.myRef1 myRef1; window.myRef2 myRef2; }); return ( div div input typetext ref{myRef1} / input typetext ref{myRef2} / /div div h3{count}/h3 button onClick{add}Add/button /div /div ); }首次渲染输出结果如下undefined {current: input} undefined {current: input} false false第 1 次点击 Add 按钮输出结果如下{current: input} {current: input} {current: null} {current: input} true false第 2 次点击 Add 按钮输出结果如下{current: input} {current: input} {current: null} {current: input} true false二、Context1、基本介绍Context 是一种组件间通信方式常用于祖组件与后代组件间通信2、使用步骤创建 Context 对象const XxxContext createContext()渲染子组时外面包裹xxxContext.Provider通过 value 属性给后代组件传递数据xxxContext.Provider value{【数据】} 【子组件】 /xxxContext.Provider后代组件读取数据// 方式 1仅适用于类式组件 static contextType xxxContext // 声明接收 Context this.context // 读取数据// 方式 2适用于函数式组件与类式组件 xxxContext.Consumer { value ( // 读取数据 【内容】 ) } /xxxContext.Consumer3、演示1方式 1Parent 组件import { Component, createContext } from react; import Child from ../Child; import ./index.css; const MyContext createContext(); const { Provider, Consumer } MyContext; export { Consumer }; export class Parent extends Component { state { username: tom, age: 18 }; render() { const { username, age } this.state; return ( div classNameparent h3Parent/h3 Provider value{{ username, age }} Child / /Provider /div ); } }.parent{width:500px;background-color:orange;padding:8px;}Child 组件import { Component } from react; import Grand from ../Grand; import ./index.css; export default class Child extends Component { render() { return ( div classNamechild h3Child/h3 Grand / /div ); } }.child{width:100%;background-color:skyblue;padding:8px;}Grand 组件import { Component } from react; import ./index.css; import { Consumer } from ../Parent; export default class Grand extends Component { render() { return ( div classNamegrand h3Grand/h3 Consumer {(value) ( div divusername: {value.username}/div divage: {value.age}/div /div )} /Consumer /div ); } }.grand{width:100%;background-color:gray;padding:8px;}2方式 2将 Context 单独抽离import{createContext}fromreact;constMyContextcreateContext();exportdefaultMyContext;Parent 组件import { Component } from react; import MyContext from ../../context; import Child from ../Child; import ./index.css; export class Parent extends Component { state { username: tom, age: 18 }; render() { const { username, age } this.state; return ( div classNameparent h3Parent/h3 MyContext.Provider value{{ username, age }} Child / /MyContext.Provider /div ); } }.parent{width:500px;background-color:orange;padding:8px;}Child 组件import { Component } from react; import Grand from ../Grand; import ./index.css; export default class Child extends Component { render() { return ( div classNamechild h3Child/h3 Grand / /div ); } }.child{width:100%;background-color:skyblue;padding:8px;}Grand 组件import { Component } from react; import ./index.css; import MyContext from ../../context; export default class Grand extends Component { static contextType MyContext; render() { const { username, age } this.context; return ( div classNamegrand h3Grand/h3 divusername: {username}/div divage: {age}/div /div ); } }.grand{width:100%;background-color:gray;padding:8px;}