React中如何定义可全局调用的函数？以页面滚动到顶部为例

Hey there! 当然可以在App.js里统一定义这个滚动到顶部的函数，然后在任意组件里复用，不用每个组件都重复写啦~ 下面给你几种实用的实现方式，还有你关心的函数放置位置问题：

1. 独立工具函数（最推荐，解耦性最强） #

其实不一定非要放在App.js里，更建议单独创建一个工具函数文件，这样所有组件都能轻松导入调用，逻辑也更清晰。
比如新建 utils/scrollUtils.js 文件：

// utils/scrollUtils.js
export const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 可选，开启平滑滚动效果
  });
};

然后在需要的组件里直接导入使用：

import { scrollToTop } from './utils/scrollUtils';

class TargetComponent extends React.Component {
  componentDidMount() {
    scrollToTop();
  }
}

如果你坚持要放在App.js里，也可以把它作为独立函数导出：

// App.js
export const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

// 其他组件里导入
import { scrollToTop } from './App';

2. 通过Props传递（适合层级较近的组件） #

如果需要调用函数的组件是App的直接子组件，或者层级不深，可以把函数作为props往下传递。但如果组件层级很深，这种方式会出现「Props drilling」（属性透传）的问题，不推荐：

// App.js
class App extends React.Component {
  // 定义为类的实例方法，避免每次渲染创建新函数
  scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  render() {
    return (
      <div>
        <Header scrollToTop={this.scrollToTop} />
      </div>
    );
  }
}

// Header.js
class Header extends React.Component {
  componentDidMount() {
    this.props.scrollToTop();
  }
}

3. 使用Context API（适合全局复用场景） #

如果你的项目里很多组件都需要这个函数，用Context API可以避免Props drilling，直接在全局提供这个函数：

// App.js
import React, { createContext, Component } from 'react';

// 创建Context
export const ScrollContext = createContext();

class App extends Component {
  scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  render() {
    return (
      // 用Provider包裹所有组件，传递函数作为value
      <ScrollContext.Provider value={this.scrollToTop}>
        <TargetComponent />
      </ScrollContext.Provider>
    );
  }
}

// TargetComponent.js
import React, { Component } from 'react';
import { ScrollContext } from './App';

class TargetComponent extends Component {
  // 绑定Context
  static contextType = ScrollContext;

  componentDidMount() {
    // 通过this.context调用函数
    this.context();
  }
}

绝对不要把函数放在render()方法里！因为render会在每次组件更新时执行，放在里面会重复创建函数实例，既浪费性能，还可能引发不必要的重渲染。

正确的做法是：

• 如果是类组件，定义为类的实例方法（像上面的scrollToTop = () => {...}这种箭头函数形式，避免this指向问题）
• 或者定义在类的外部，作为独立的函数（比如工具函数的写法）

内容的提问来源于stack exchange，提问作者Amir Shahbabaie