类/功能组件，内部方法

Question

I'm quite new to ReactJs and I'm trying to understand a little more detail.

In a Class component, these are the two ways that I know I can declare a handler method to change the 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

In functional component the below two ways I can do it

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

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

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

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 eg methodName.bind(this,"newNamehere")

why is this? Even for the functional component where initially I did not need to bind when I want to add "newName" as a parameter, I must now bind. Can someone explain, please?

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"?

It's not related to React , but ES6. Classes are syntactical sugar and they are just special functions. And what you're seeing as a method is just a short hand for a function assigned to a method's name. So when you write this:

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

fooClass is actually a function and the methods inside that for eg bar are written to fooClass.prototype . Also, you'd like to see,

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());

You can go through more on MDN- Classes and function-definitions MDN

Coming to the second part of the question,

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 eg methodName.bind(this,"newNamehere")

This syntax is experimental class property and you can use this instead of bind ing the method in the constructor. Note that this syntax may change.

Read More https://reactjs.org/docs/react-without-es6.html#autobinding

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