React中使用this与赋值给const访问props/state的性能对比

嘿，这个问题问得挺实在的——很多没科班背景的React开发者都会有类似的疑惑，我来给你唠明白～

首先说性能：几乎没差异 #

你担心的“每次访问this.props都要在组件上执行操作，开销比局部变量大”其实是想多了。从JavaScript底层来看：

• this.props本质是访问组件实例（this对象）的props属性，现代JS引擎（比如V8）的JIT编译器会对频繁访问的对象属性做缓存，不会每次都重新遍历查找。
• 解构到局部变量const { props } = this只是把this.props的引用存到了一个局部标识符里，并没有复制整个props对象，所以两者的计算开销几乎可以忽略不计。

简单说，性能上这两种写法没有值得纠结的差别。

真正该关注的是代码可读性和风格 #

这才是选择写法的核心依据：

• 如果render里只用到1-2个props/state，直接写this.props.text更简洁直观，新手也能一眼看出来这个值来自组件的props。
• 如果需要用到多个props/state，解构到局部变量会让代码清爽很多。比如：

  render() {
    const { text, title, count } = this.props;
    const { loading } = this.state;
    return (
      <div>
        <h1>{title}</h1>
        <p>{text}</p>
        {loading && <span>Loading...</span>}
      </div>
    );
  }
  

  对比反复写this.props.title、this.state.loading，这种写法减少了重复代码，看起来更干净。

另外，现在React函数组件里解构props/state已经是非常普遍的写法，类组件里用解构也能和函数组件的风格保持一致，团队协作时更统一。

为什么很多教程用this.props？ #

主要两个原因：

• 早期React的示例更偏向于直接引用，方便新手理解“props是组件实例的属性”这个概念；
• 对于简单的演示场景，直接写this.props更简短，没必要多写解构的代码。

总结 #

不用纠结性能差异，怎么选完全看代码的复杂度和团队的风格规范：

• 少量props/state：直接用this.props/this.state就行；
• 多个props/state：解构到局部变量让代码更易读；
• 嵌套的props（比如this.props.user.name）：可以进一步解构，比如const { user: { name } } = this.props，减少重复的属性链书写。

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