Javascript 我应该绑定不影响状态的函数吗'

Technically，对于你的例子来说，绑定引用this.state和this.setState()的函数就足够了，BUT你误解了原因:

您需要绑定使用this的函数，因为this总是引用当前的execution context，并且您需要在List组件的上下文中执行这些函数，以便通过this关键字引用组件的方法/属性.

但是，在分配给onClick属性的情况下，与List组件的关系"丢失".

关于执行上下文

完全相同的函数可以在不同的执行上下文中执行.例如，考虑这个例子:

const o = {
  fnct: function(){      // assign an anonymous function to `o.fnct`
    console.log( this ); // print current execution context
  }
};

const f = o.fnct; // assign the same function to `f` 

o.fnct();  // call the function in the context of `o`
f();       // call the function in the global context (`window` in the browser)

对于this，你会得到不同的输出:对象o代表o.fnct()，全局对象代表f().

如果你需要保持函数始终在o的上下文中执行(而不是当前上下文)，你需要将函数绑定到o:

const fTemp = o.fnct;  // this is the "plain" original function again
const fBoundToO = ftemp.bind(o); // this is the function bound to `o`
o.fnct = fBoundToO;    // re-assign the bound function to `o.fnct`

同样可以写得更短:

o.fnct = o.fnct.bind(o);

现在你可以在其他上下文中使用这个绑定函数，但它的this仍然是o:

const f = o.fnct;  // assign the bound function to `f`
f();               // call `f()` in the global context, but inside `f` the bound context `o` is used

现在，在这两种情况下，对象o都被打印为执行上下文.

React onClick

当你在React中分配onClick={ onClickHandler }属性时，会发生与上面相同的情况:

this.onClickHandler = function(){}; // assign a function to the property `this.onClickHandler`
// ...
{
  onClick: this.onClickHandler // assign the _same_ function to `onClick`
}
// ...
List.onClickHandler();  // `this` inside the function is the List
Button.onClick();       // `this` inside the function is the Button

当执行onClick()时，它只是在任何上下文中执行该函数(e.g. the 101 React element).

但是，如果onClickHandler被绑定到List组件(102)，那么它会继续使用List组件作为上下文(即this指向List组件，this.state是'theListMementInstance.state').

结论

你现在不需要绑定addList()和clearList()，因为它们不使用this，所以在哪个上下文中执行它们并不重要.

但是addList()和clearList()可能迟早会导致其他错误，因为它们操纵DOM，这在React中是绝对不应该做的.