React useRef使用
主要分析函数式组件
useRef(/createRef)
useRef
和 createRef
前者每次渲染都是同一个,后者则是每次渲染都会新建。两者的功能都是类似于 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中原来可以用 模板字符串
``