react类组件 ref_对功能类组件的基本介绍做出React

react类组件 ref

When learning to use the React library for JavaScript it can be tricky as a beginner. One of the main concepts that seemed difficult for me at first was the use of functional components and class components. Components are defined in the React documentation as a way to “let you split the UI into independent, reusable pieces, and think about each piece in isolation.” In essence, allowing each component to change and be updated within its scope and not affecting other components. It can help you make your application more manageable and easier to find errors by creating isolated pieces that you can target when something has gone wrong. At first, I found it difficult to differentiate what did what and why would you use one over the other as they have slight syntax differences and capabilities. I will try and make the differences and the application of each as simple as possible. (Full disclosure: this will not cover react hooks)

在学习将React库用于JavaScript时，初学者可能会比较棘手。 一开始对我来说似乎很困难的主要概念之一是使用功能组件和类组件。 组件在React文档中定义为“让您将UI分成独立的，可重用的部分，并单独考虑每个部分的方式”。 本质上，允许每个组件在其范围内进行更改和更新，并且不影响其他组件。 通过创建孤立的片段，当出现问题时可以将其作为目标，它可以帮助您使应用程序更易于管理，并且更容易发现错误。 刚开始，我发现很难区分做什么和为什么要使用一个，而又使用另一个，因为它们在语法和功能上都有细微的差别。 我将尽力使每个差异和应用尽可能简单。 (全面披露：这将不包括React钩)

Functional Components are javascript functions that can be written as arrow functions or a regular function using the function keyword. They are stateless components and are mainly used for presentational purposes. This is one of the main differences between a functional component and a class components, their use of props and state.

功能组件是javascript函数，可以使用function关键字编写为箭头函数或常规函数。 它们是无状态组件，主要用于演示目的。 这是功能组件和类组件，道具的使用和状态之间的主要区别之一。

Different ways of writing a functional component

编写功能组件的不同方法

Props and State are both JavaScript objects, one of their difference is that Props is passed to a component and can be used between both functional and class components, for example a parent to a child. As we mentioned before Functional components are stateless so that leaves us with class components in order to create and use state.

Props和State都是JavaScript对象，它们的区别之一是Props传递给组件，并且可以在功能组件和类组件之间使用，例如，父级为子级。 如前所述，功能组件是无状态的，因此我们可以使用类组件来创建和使用状态。

Class components allow us to use , props, state, and lifecycle methods. Setting state and lifecycle methods cannot be used within functions without hooks but that is a topic for another conversation, this is just about the basic differences. State is managed within the component and can only be used by class components. By having access to state and lifecycle methods in class components we can do more complex logic for example rendering and updating forms, or doing a fetch request within our components. It also allows us to store changing data and be able to dynamically use it between components.

类组件允许我们使用， 属性， 状态和生命周期方法 。 设置状态和生命周期方法不能在没有钩子的函数内使用，但这是另一个对话的主题，这只是基本的区别。 状态是在组件内管理的，只能由类组件使用。 通过访问类组件中的状态和生命周期方法，我们可以执行更复杂的逻辑，例如呈现和更新表单，或在组件中执行获取请求。 它还使我们能够存储变化的数据，并能够在组件之间动态使用它。

Different ways of creating class components and using state, both will function the same

创建类组件和使用状态的不同方法，两者的功能相同

One thing to keep in mind is certain syntax differences when using props between functional components and class components. In functional components you just use props and in class components you use the keyword this before calling props.

要记住的一件事是在功能组件和类组件之间使用prop时，某些语法上的差异。 在功能组件中，您仅使用道具，而在类组件中，则在调用道具之前使用关键字this 。

Another important syntax difference when using functional components as opposed to class components is how you define a function within. I know this may seem straightforward but I think jumping from javascript to react you just have to remember not to forget how javascript works. Within functions you can use functions that are defined as an arrow function or with the function keyword. When you are define a function within a class function you just define it by the name you are assigning it.

使用功能组件而不是类组件时，另一个重要的语法差异是如何在其中定义函数。 我知道这似乎很简单，但我认为从javascript跳到对您做出React只是要记住不要忘记javascript的工作原理。 在函数中，可以使用定义为箭头函数或带有function关键字的函数。 当您在类函数中定义一个函数时，只需使用您为其分配的名称来定义它。

When deciding what type of component to use it depends on what you expect your component to do if it is going to just be presentational and wont’t be required to do much, for example a navigation bar which just points you in a certain direction, you would want to use a functional component. In the end it really is about how you are deciding to structure and design your components and code.

在决定使用哪种类型的组件时，要取决于您希望组件只是呈现性的并且不需要做很多事情，例如，导航栏仅将您指向某个方向，您可能想使用功能组件。 最后，它实际上是关于如何决定结构和设计组件及代码的。

I know this is a basic introduction to what functional and class components are capable of doing. These are some of the main things that I personally struggled with and I think would be helpful to clear up for any other beginners to hopefully be on your way to understand the more complex ways of working with react components.

我知道这是对功能和类组件的功能的基本介绍。 这些是我个人在努力解决的一些主要问题，我认为这对清理其他任何初学者很有帮助，希望他们能够了解您使用React组件的更复杂方法。

翻译自: https://medium.com/@jorgeguilln_8047/react-basic-introduction-to-functional-class-components-3712c44396bd

react类组件 ref