react函数编程,如何实现修改事件,不影响重绘?

嘻倪孢
  • 330

我想实现的功能: react组件可以对外暴露一些方法,比如就是什么请求前拦截,数据返回后的自定义处理逻辑,获取按钮点击前的拦截方法。这些方法都是暴露给其他人用的,这种又不和ui产生任何的关联,外部在绑定这些方法的时候我希望不产生重新渲染,在函数式组件中药这么搞呢 用useRef?

// class 实现方式
class Child extends React.Component {
    constructor(props) {
        super(props);
        window.child = this;
    }
    handleClick (){
      alert(333)
    }
    click = () => {
        this.handleClick();
    }
    render() {
      return <button onClick={this.click}>按钮</button>
    }
}
// 这样我可以修改绑定的事件触发,也不会引起重绘。并且在点击的时候 执行的也是弹出的9999
window.child.handleClick = () => {alert(9999)}
回复
阅读 547
2 个回答

使用useImperativeHandle&forwardRef,见文档:https://react.docschina.org/d...

或者可以声明一个传ref的prop,在组件里为其赋值,例如:

function PersonList(props) {

  if (props.getRef) props.getRef.current = {
    scrollToPositionByPerson
  }

  function scrollToPositionByPerson() {
    
  }
}

function PersonListPage() {
  // personListRef.current.scrollToPositionByPerson在第一次渲染之后就可以使用了,
  // 这和类组件使用Ref的过程是一致的
  const personListRef = useRef()

  return (
    <PersonList getRef={personListRef} />
  )
}

我习惯用第二种方法,第一种方法在使用ts的时候会导致Ref报类型错误,如果不用ts的话没问题。

另外,你使用类组件暴露组件内方法的用法不对,正确用法是使用Refs api,文档:https://react.docschina.org/d...

感谢邀请
首先我们需要明白,选定框架或库应用到项目中之后有个重要的原则就是,尽可能的按照框架库的规范进行使用和开发,如果出现大面积的hack行为,则表示框架或库不适合在当前的项目环境。由于js语言的特性,很多时候我们可以通过一些技巧达到一些目的,但那是不得已而为之。

函数组件中,通常我们使用useCallbackmemoized函数来达到题上所描述的;通过第二个参数的依赖来决定什么时候重新生成函数;因此如题所述,在props中传递函数时,如果父组件是函数组件则可以通过useCallback,如果是类组件则直接使用类方法即可;

补充说明一下,大多数情况下(99%的场景)我们不需要额外去关注是否重新render,react已经帮我们做的足够好了。我们只需要想清楚,我们的依赖是否合理,是否最小化即可,其他的交给react即可

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏