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中原来可以用 模板字符串 ``