类/功能组件，内部方法

Question

我对 ReactJs 很陌生，我试图了解更多细节。

在 Class 组件中，这是我知道的两种方法，我可以声明一个处理程序方法来更改 state

 classChangeState=()=>{
         this.setState({
             Person:[
                 {firstName:"test", secondName:55}
             ]
         })
     }

classChangeState2(){
    console.log("Inside Change state click")
    this.setState({
         Person:[
             {firstName:"test", secondName:55}
         ]
     })enter code here
 //classChangeState2 require me to bind "this" inside render method

在功能组件中，我可以通过以下两种方式做到这一点

    function changeStateClick(){
            changeState({
             Person:[
                {firstName: "Just aasefaesfstring property", secondName: 32}
            ]
        })
        }

    const changeStateClick2 =()=> changeState({
             Person:[
                {firstName: "Just a[[[string property", secondName: 32}
            ]
        })

我有几个问题 1) React 怎么知道 classChangeState2 是一个没有“函数”的方法？

2) 我知道我可以在上述所有方法中传入一个 newName 作为参数，但我必须在所有方法的渲染中绑定“THIS”。 例如 methodName.bind(this,"newNamehere")

为什么是这样？ 即使对于最初我想添加“newName”作为参数时不需要绑定的功能组件，我现在也必须绑定。 有人可以解释一下吗？

classChangeState=(newName)=>{
         this.setState({
             Person:[
                 {firstName:newName, secondName:55}
             ]
         })
     }

Answer 1

我有几个问题 1) React 怎么知道 classChangeState2 是一个没有“函数”的方法？

它与React无关，而是与 ES6 相关。 类是语法糖，它们只是特殊的功能。 您所看到的方法只是分配给方法名称的 function 的简写。 所以当你写这个时：

   class fooClass {
    bar(...) {} 
   }

fooClass实际上是一个 function 并且其中的方法例如bar被写入fooClass.prototype 。 另外，你想看看，

从 ECMAScript 2015 开始，引入了一种更短的对象初始化方法定义语法。 它是分配给方法名称的 function 的简写。

 const obj = {
  foo() {
    return 'bar';
  }
};

console.log(obj.foo());

您可以通过 MDN 上的更多内容来go-类和函数定义 MDN

来到问题的第二部分，

2) 我知道我可以在上述所有方法中传入一个 newName 作为参数，但我必须在所有方法的渲染中绑定“THIS”。 例如 methodName.bind(this,"newNamehere")

此语法是实验性的 class 属性，您可以使用它而不是在构造函数中bind方法。 请注意，此语法可能会更改。

阅读更多https://reactjs.org/docs/react-without-es6.html#autobinding

https://babeljs.io/docs/en/babel-plugin-transform-class-properties/