React中有没有可替代jQuery的.proxy()方法的实现方案？

jQuery的$.proxy(func, context)本质是创建一个绑定了指定this上下文的函数，和JS原生的Function.prototype.bind功能完全一致，不需要引入jQuery即可在React中实现同等效果。

基础替换方案：直接用原生bind方法 #

原有jQuery写法可直接等价替换：

• 基础绑定：const boundedFunc = $.proxy(myFunction, this) 替换为 const boundedFunc = myFunction.bind(this)
• 带预传参绑定：const boundedFunc = $.proxy(myFunction, this, param1, param2) 替换为 const boundedFunc = myFunction.bind(this, param1, param2)

React 中常见使用场景示例 #

类组件中绑定事件处理函数 #

原有依赖jQuery的写法：

// 旧写法
handleClick() {
  console.log(this.state.count)
}
render() {
  return <button onClick={$.proxy(this.handleClick, this)}>点击</button>
}

有两种无jQuery的替换方案可选：

• 直接在事件绑定时调用bind：

  render() {
    return <button onClick={this.handleClick.bind(this)}>点击</button>
  }
  

• 类属性箭头函数（更推荐，避免每次render重复创建函数）：

  handleClick = () => {
    console.log(this.state.count)
  }
  render() {
    return <button onClick={this.handleClick}>点击</button>
  }
  

函数组件中使用 #

函数组件本身没有实例this指向问题，如需复用旧代码中依赖固定上下文的逻辑，直接用bind绑定或者箭头函数包裹即可：

function MyComponent() {
  const someObj = {
    value: 10,
    getValue() { return this.value }
  }
  // 方案1：用bind绑定上下文
  const boundedGetVal = someObj.getValue.bind(someObj)
  // 方案2：箭头函数包裹，效果完全一致
  const boundedGetVal2 = () => someObj.getValue()

  return <div>{boundedGetVal()}</div>
}

自定义兼容函数（完全对齐$.proxy行为） #

如果旧代码中存在大量$.proxy调用，不想逐个修改，可以直接实现一个同名方法做全局替换，原有调用不需要任何调整即可正常运行：

function proxy(func, context, ...args) {
  if (typeof func !== 'function') {
    throw new TypeError('First argument must be a function')
  }
  return func.bind(context, ...args)
}

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