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

Question

我想实现的功能： 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)}

Answer 1

使用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...

Answer 2

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

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

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