Fork me on GitHub

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

Coding Poineer

React useRef使用

主要分析函数式组件

useRef(/createRef)

useRefcreateRef 前者每次渲染都是同一个,后者则是每次渲染都会新建。两者的功能都是类似于 Vue创造一个 ref 对象,其 current属性会指向 DOM 节点。
下面谈一下 forwardRef 这个 hook
如下,react特性之一就是单向数据流,而 forwardRef可以帮助父组件访问子组件的属性,
原理:父组件创建一个parentHook,下放鱼钩,子组件身上封装一层潜水员,潜水员捕捉到hook并挂到子组件身上,遂接下来可以顺利访问
很明显,React官方也不支持这种潜水员挂鱼的行为!

// 子组件
export const FancyButton = React.forwardRef((props, parentHook) => (  <button ref={parentHook} className="FancyButton">    {props.children}
    </button>
    ));


// 父组件
import FancyButton from './FancyButton'
// 你可以直接获取 DOM button 的 ref:
const parentHook = React.createRef(); //放钩
<FancyButton ref={parentHook}>you can hihihi if you could chase me !!!! </FancyButton>;

由于使用class组件当项目比较大时,需要加入很强的代码规范才能保证可维护性、可扩展性,class在编译时也会产生大量的冗余代码。使用hook钩子既可以轻量化代码、也可以让开发者减少对复杂的this处理
react是单数据流,每次props变化都会重新执行一遍

JSX中原来可以用 模板字符串 ``

posted @ 2021-07-15 21:13  365/24/60  阅读(192)  评论(0编辑  收藏  举报