类/功能组件，方法

Question

我对 ReactJs 很陌生，我正试图了解更多细节。在类组件中，我知道这两种方式可以声明处理程序方法来更改状态。 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 如何知道类ChangeState2 是一个没有“函数”的方法？2）我知道我可以在上述所有方法中传入newName作为参数，但我必须在所有方法的渲染中绑定“THIS”。例如，对于方法名称.bind（this，“newNamehere”）这是为什么呢？即使对于功能组件，当我想要添加“newName”作为参数时，最初我不需要绑定，我现在也必须绑定。有人可以解释一下吗？classChangeState=(newName)=>{         this.setState({             Person:[                 {firstName:newName, secondName:55}             ]         })     }

Answer 1

我有几个问题 1） React 如何知道类ChangeState2 是一个没有“函数”的方法？

它与 React 无关，但与 ES6 无关。类是语法糖，它们只是特殊函数。你所看到的方法只是分配给方法名称的函数的简写。所以当你写这个的时候：

   class fooClass {

    bar(...) {} 

   }

fooClass实际上是一个函数，其中的方法例如被写入 。另外，你想看看，barfooClass.prototype

从 ECMAScript 2015 开始，引入了对象初始值设定项上的方法定义的简短语法。它是分配给方法名称的函数的简写。

 const obj = {

  foo() {

    return 'bar';

  }

};

console.log(obj.foo());

您可以了解有关 MDN 类和函数定义 MDN 的更多信息

来到问题的第二部分，

2）我知道我可以在上述所有方法中传入newName作为参数，但我必须在所有方法的渲染中绑定“THIS”。例如，对于方法名称.bind（this，“newNamehere”）

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

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

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