Class/Functional 组件，内部方法

Question

我是 ReactJs 的新手，我想了解更多细节。

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

 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 是没有 "function" 的方法？

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

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

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

Answer 1

I have a few questions 1) how does React know that classChangeState2 is a method without the "function"?

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

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

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

Starting with ECMAScript 2015, a shorter syntax for method definitions on objects initializers is introduced. It is a shorthand for a function assigned to the method's name.

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

console.log(obj.foo());

您可以在 MDN- Classes and function-definitions MDN

上了解更多

来到问题的第二部分，

2) I know that I can pass in a newName as parameters in all of the above methods above but I must bind "THIS" in the render for all methods. For e.g 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/

Class/Functional 组件，内部方法

Class/Functional component, methods within

javascript

class

reactjs

react-functional-component