React学习疑问：无需修改state的函数是否需要绑定this？

关于函数的this绑定问题 #

addList()、clearList()这类函数内部没有使用this（比如this.state、this.props），所以哪怕不做this绑定，也能正常运行——因为函数里不需要依赖组件实例的上下文。不过如果之后你修改这些函数，需要用到组件的状态或属性，那时候就必须绑定this了。

如果想省掉手动bind的麻烦，推荐用类字段箭头函数来定义方法，它会自动绑定当前组件的this，不用在constructor里写bind代码：

addList = (value) => {
  // 函数内容
}

clearList = () => {
  // 函数内容
}

代码优化建议 #

你的代码现在直接操作DOM来更新列表，这不符合React“状态驱动视图”的核心思路，这里给几个优化方向：

• 用状态管理列表数据，彻底抛弃手动DOM操作
  把所有列表项存在state的数组里，render时通过map自动生成DOM元素：

  1. 修改state结构，添加列表数组：

     this.state = {
       listValue: '',
       list: [] // 存储所有列表项
     }
     

  2. 修改handleList方法，直接更新状态：

     handleList(){
       const trimmedValue = this.state.listValue.trim();
       if(trimmedValue){
         // 用函数式setState确保拿到最新的state
         this.setState(prevState => ({
           list: [...prevState.list, trimmedValue],
           listValue: '' // 自动清空输入框
         }))
       }
     }
     

  3. 在render里渲染列表：

     <ul className="listBox">
       {this.state.list.map((item, index) => (
         <li key={index}>{item}</li>
         // 提示：如果列表项有唯一标识（比如ID），用唯一标识当key更优
       ))}
     </ul>
     

• 将textarea改为受控组件
  给textarea绑定value属性，完全由state控制输入内容，不用手动操作DOM清空：

  <textarea 
    placeholder="Type here" 
    className="textArea" 
    maxLength={68} 
    onChange={this.addValue}
    value={this.state.listValue}
  ></textarea>
  

• 简化clearList函数
  直接通过setState清空列表数组，不用手动删除DOM节点：

  clearList = () => {
    this.setState({ list: [] })
  }
  

• 删除冗余的state字段
  原来的listAdd字段只是用来传递临时值，用状态管理列表后完全可以删掉，让state结构更简洁。

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