React自带的Hook,以及高阶组件

242 阅读1分钟

useReducer() 当前页面需要多个 state 一起更新时

链接 :技术来源segmentfault的csRyan

链接 :技术来源CSDN的weixin_34198797

usecontext

链接:blog.csdn.net/weixin_4370…

React.forwardRef

// 无法生效当前ref指向组件
const A=React.forwardRef((props,ref)=> {
    <B {...props} ref={ref}/>
})

// 可以生效指向DOM元素div
const A=React.forwardRef((props,ref)=>( 
    <div ref={ref}> 
        <B {...props}/> 
    </div> 
))
  • useRef: 用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件,并调用相对应子组件中的方法)
  • React.forwardRef: 将ref父类的ref作为参数传入函数式组件中,本身props只带有children这个参数,这样可以让子类转发父类的ref,当父类把ref挂在到子组件上时,子组件外部通过forwrardRef包裹,可以直接将父组件创建的ref挂在到子组件的某个dom元素上

使用 forwardRef 和 useImperativeHandle 的方案

  • forwardRef会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中
  • blog.csdn.net/qq_44586361…
function InputWithLabel(props) {
  const { myRef } = props;
  const _innerRef = useRef(null);

  const getValue = () => {return 'value'};

  useImperativeHandle(myRef, () => ({
    getValue,
    focus() {
      const node = _innerRef.current;
      node.focus();
    }
  }));

  return (
    <div> <input ref={_innerRef} value={value}/> </div>
  );
}

const RefInput = React.forwardRef((props, ref) => (
  <InputWithLabel {...props} myRef={ref} />
));

function App() {
  const myRef = useRef(null);
  const handleFocus = () => {
    const node = myRef.current;
    console.log(node);
  };
  
  return (
    <div className="App">
      <RefInput ref={myRef} />
      <button onClick={handleFocus}>focus</button>
    </div>
  );
}


结语

前端react QQ群:788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群:249620372 ---- FRONT-END-JS前端

(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习