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是一个没有“功能”的方法？

2）我知道我可以在上述所有上述方法中将newName作为参数传递，但是我必须为所有方法在渲染器中绑定“ THIS”。例如 methodName.bind（this，“ newNamehere”）

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

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

Answer 1

我有几个问题1）React如何知道classChangeState2 是没有“功能”的方法？

它与 React 无关，但与ES6有关。类是语法糖，它们只是特殊功能。而且，您所看到的方法只是分配给方法名称的函数的简写形式。因此，当您编写此代码时：

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

fooClass实际上是一个函数，并且其中的内部方法（例如bar）被写入fooClass.prototype。另外，您想看看，

从ECMAScript 2015开始，这是方法的较短语法介绍了有关对象初始化程序的定义。这是一个简写分配给方法名称的函数。

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

console.log(obj.foo());

您可以在MDN- Classes和function-definitions MDN上进行更多的了解

问题的第二部分，

2）我知道我可以将newName作为参数传递给所有以上方法，但我必须在渲染器中为所有绑定“ THIS” 方法。例如，methodName.bind（this，“ newNamehere”）

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

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

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

类/功能组件，

1 个答案: