React函数未自动调用疑问：为何需直接调用而非引用？

这个问题其实是JSX渲染规则的常见小坑，我来给你掰扯清楚核心逻辑：

首先得明确JSX的核心规则：JSX花括号{}里需要的是「可渲染的表达式结果」，而不是函数本身。咱们拆解几个关键点：

• 函数引用 vs 函数调用的本质区别
  直接写{this.getFields}，你其实是把这个函数的引用对象传给了React。React拿到这个函数对象后，会尝试把它转换成可渲染内容——结果就是把函数转换成字符串（比如页面上显示function getFields() { ... }），这显然不是你要的组件。
  而{this.getFields()}是主动执行这个函数，拿到它返回的React组件/元素数组，这才是React能识别并渲染的合法内容。

• 构造函数绑定this的作用是什么？
  你在构造函数里绑定this，只是解决了函数内部this指向组件实例的问题，让函数能正确访问组件的state、props等。但绑定并不会让函数自动执行——它只是保证当你主动调用这个函数时，里面的this是对的，和函数是否被执行完全是两回事。

• 举个直观的例子
  假设你的函数是这样的：

  getFields() {
    return <input type="text" placeholder="我是动态生成的组件" />;
  }
  

  • 写{this.getFields}：React渲染出来的是这个函数的字符串表示，页面上会显示类似function getFields() { ... }的文本
  • 写{this.getFields()}：React执行函数，拿到<input>元素，然后正常渲染这个输入框

另外补充一点：如果是类组件里的方法，有时候你可能会看到用箭头函数的写法，比如{() => this.getFields()}，这其实是创建一个匿名函数，当React渲染时执行它，再调用你的getFields函数，效果和直接写{this.getFields()}类似，但要注意如果是在列表渲染里用箭头函数可能有性能问题，不过这是另一个话题了。

总结一下：你忽略的核心要点是JSX花括号需要的是执行函数后的返回值，而不是函数本身，绑定this只是保证函数内部的上下文正确，不影响函数是否被执行。

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