Question

我碰到了这篇文章

https://overreacted.io/how-are-function-components-different-from-classes/

这很有趣，但是我想问一件事，我有点理解，但是想通过探索更多有关该主题的文章来进一步挖掘，特别是，道具与“ this”相关联是什么意思？区别在于封盖如何工作吗？我有点模糊，我认为我不太了解render方法的工作原理以及在类中调用方法时如何堆叠变量...

有人可以帮助我找到更多有关此问题的文章吗？谢谢

Answer 1

您必须注意，在执行Functional组件时实例化了类。

现在，当实例化一个类时，React接受属性，即附加到Component的每个实例的props并将其设置为React.Component内的类Property

class React.Component {
   constructor(props) {
       this.props = props;
   }

   ...
}

并且由于类组件扩展了React.Component，因此您还可以使用this参考来访问基类属性

然而，功能组件在闭包上起作用，并且在执行时，道具作为参数传递给功能组件

const MyComponent = (props) => {
   console.log(props)
}

Javacript中的类适用于prototypes。 render方法被定义为类组件中的一个函数，在其生命周期中被React.Component调用。但是对于功能组件，整个身体都可以视为渲染方法

但是，随着钩子的到来，人们越来越关注在功能组件中提供类似生命周期的实用程序，但是基本设计保持不变

Answer 2

嗨，关于闭包和范围，钩子是函数的组成部分，如果您想从外部范围访问变量，那么闭包将以类似于javascript的方式进行。

function Example (){
      const [exampletypes, setExampletypes`] = useState('');
// outer scope

     // followed by Inner scope has access to variables of the outerscope. 
function ExampleTwo(){
}

但是，一些区别使挂钩变得更加干净，开发者更加友好：

•在功能组件中没有this.props /this.state。

•功能组件更简洁，更简洁，更易于读写。

•语法不同，管理状态，范围和闭包的方式也不同。

•例如，类中的componentDidMount是函数中的useEffect。

•我想，因为代码更少，所以性能更好。

在使用功能和类导出道具时，有两个组件比较：

 import React, {Component} from 'react'
    export default class Greeting extends Component {
      render() {
        return (
          <View style={{alignItems: 'center'}}>
            <Text style={styles.textSize}>{this.props.name}</Text>
          </View>
        );
      }
    }

和带有道具的功能部件：

    import React,{useState} from 'react';
    export default function Greeting(props) {
       const [name] = useState(props.name)
        return (
          <View style={{alignItems: 'center'}}>
            <Text style={styles.textSize}>{props.name}</Text>
          </View>
        );
      }

类的Props和ReactJs中的功能组件有什么区别？

2 个答案: