用简单的英语学习 React

React是一个声明式、高效且灵活的 JavaScript 库，用于构建用户界面。它允许你使用一些小型、独立且可复用的代码片段（称为“组件”）来构建复杂的 UI。

您可以通过两种主要方式安装和使用 React：

使用 npm 安装create-react-app
从他们的网站手动下载React.js和ReactDOM.js文件并将其包含在 HTML 页面的脚本标签中。

Create React App是一个 React 代码生成器，它可以为你的项目创建脚手架。有了它，你无需进行太多的手动配置和设置。它底层使用了 Babel 和 Webpack，所以你几乎不需要了解任何关于它们的知识。

谢天谢地，Webpack 对我来说没什么意思

babel 的主要用途是将 JSX 转换或编译为原生 JavaScript 代码。

JSX 是什么？别担心，我们马上就会讲到。

当你准备部署到生产环境时，运行npm run build将在 build 文件夹中创建应用的优化版本。运行此命令将设置你的开发环境：

npx create-react-app test-app
cd test-app
npm start

React 组件被定义为类。如果你有 ES6 背景，你应该知道什么是类。

类只是对象的蓝图。为了便于说明，你可以将一栋建筑的建筑平面图视为一个类，而根据该平面图构建的最终建筑则是一个对象。建筑平面图不包含诸如颜色、要使用的家具类型等属性。所有这些属性都将在“建造”建筑物（即对象）时提供。

希望你理解我的意思吧？哈哈。

当您通过调用其构造函数方法来实例化一个类时，您就“构造”了一个对象。

当你定义一个 React 组件时，你使用 ES6 类语法。

如果你想要一个关于 ES6 JavaScript 的详细教程，其中包括你将在下面的代码块中看到的“this”关键字的课程，可以考虑购买我的《Web 开发初学者指南》电子书。我免费附赠了《你不知道的 JS - ES6 及更高版本》！

class ProfileDetails extends React.Component {
  constructor (props) {
      this.state = {
      occupation: "student"  }
 }

  render() {
    return (
      <div className="profile">
        <h1>Profile for {this.props.name}</h1>
        <ul>
          <li>Male</li>
          <li>{{this.props.age}}</li>
          <li>{{this.state.occupation}}</li>
        </ul>
      </div>
    );
  }
}

让我来分解一下这段代码片段，伙计们。

ProfileDetails 是此组件的名称
“extends” 关键字表示您正在扩展父级 React 组件来构建此组件。这使您可以访问 React 的某些功能。
构造函数方法定义了实例化此类时会发生什么。当您在父元素中注册此元素时，就会发生这种情况。在我们的例子中，我们通过“props”参数继承了从父组件传递的属性。我们还设置了本地状态数据。不知道状态是什么？我们稍后会讲到。这里的“this”是对当前类的引用。
道具？我们很快也会讲到这个。
render 方法是一个非常重要的函数。它返回该组件的完整标记。如果没有它，组件的视图部分就无法显示。

最后，你注意到代码中有一些类似 XML 的语法。你猜怎么着，那不是 HTML，而是JSX。

JSX是一个 JavaScript 扩展，旨在简化在 React 中创建元素的过程。

如果没有 JSX，你通常会这样创建 React 元素：

React.createElement(
"div",
null,
React.createElement(HelloWorld, null), React.createElement("br", null), React.createElement( "a", { href: "ubahthebuilder.tech" }, "Great JS Resources" ) )

感谢 JSX，这就像在 React 内部编写 HTML 一样：

<div>     
  <HelloWorld/>     
  <br/>     
  <a href=" ubahthebuilder.tech ">Great JS Resources</a> 
</div>

这就是 JSX 有用的原因！

假设您有一个“myForm”组件类，它的渲染方法应该包含类似的元素和其他相关元素，因为这些元素将构成“MyForm”的视图。

在render()中，您可以返回任何一组W3C元素，例如 div、spans、h1 等，以及其他自定义反应组件。

反应道具

在 HTML 中，当将属性传递给元素时，您可以执行以下操作：

div class="main"

当你将属性传递给 React 元素时，你应该始终记住，你只能从父元素的上下文中传递属性，父元素也是你注册/实例化子元素的地方。
例如：

// Parent Class
class App extends React.Component {
    render() {
      return (
         <div className="profileSection">
           <ProfileDetails name="Kingsley" age=21 /> // Child Component Instantaited
         </div>
       );
   }
}

代码片段一目了然。您只需从父类（App）向子元素（ProfileDetails）传入属性（name 和 age）。然后，子类使用this.props.NAME语法访问这些属性。

注意：当类被父类实例化时，它就变成了一个元素。
与元素一样，您可以传入任何 W3C 属性，例如标题、宽度等，也可以定义您自己的自定义属性。

各州

在 React 组件中传递数据的另一种方式是使用状态。状态与 Props 类似，也是 React 元素的属性。Props和 State 的主要区别在于，状态是在相关类内部定义的，而 Props只能从父元素传递。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

组件生命周期方法

人类的典型生命周期是出生、怀孕、婴儿期、幼儿期、童年期、青春期、青少年期、成年期、中年期和成熟期。
你猜怎么着？身体的各个部分也有生命周期。它们大致可以分为以下三类：

安装（诞生）：当任何组件被创建并插入到 DOM 中时（当您调用 reactDOM.render() 时发生），使用的一些生命周期方法是：
- 构造函数()
- 静态 getDerivedStateFromProps()
- 使成为（）
- 组件挂载()
更新（增长/变化）：任何对组件属性（Props 和 State）的更改都会触发该组件的重新渲染，这也称为更新阶段。在此阶段，以下生命周期方法会被调用：
- 静态 getDerivedStateFromProps()
- 应该组件更新（）
- 使成为（）
- 获取更新前的快照（）
- 组件更新（）
UNMOUNTED (DEATH)：卸载/销毁任何组件时都会调用此方法：-
- 组件将卸载（）

常见错误详情

构造函数 ()：此生命周期方法在组件的挂载阶段运行。定义构造函数方法时，务必在任何其他语句之前使用 super(props) 继承 Props。此方法也是为组件定义本地状态对象的地方。您不应直接从此处修改状态，任何更新都必须使用 setState 方法完成。
render()：此方法以 JSX 格式返回组件视图，JSX 是一种类似于 HTML 的 JavaScript 扩展。当父组件的 render 方法被调用时，该操作也会触发子组件的 render 方法。父组件的 render 调用只有在其子组件的 render 调用完成后才算完成。任何组件更新时都会触发重新渲染（后续渲染）。
componentDidMount()：此方法在组件成功挂载到 DOM 后运行。此时，DOM（文档对象模型）已绘制完毕，可供进一步操作。这里非常适合调用 setState 方法。
此外，任何 API 调用和浏览器交互也可以在这里进行。需要注意的是，此方法只会在组件创建时运行一次。
- shouldComponentUpdate()：在此方法中，您可以返回一个布尔值，该值指定 React 是否应继续重新渲染 UI。默认值为 true。但是，您可以指定 false 或计算结果为 false 的表达式。
render()：这是前面提到的后续渲染。这发生在 UI 组件接收到新的 Props 或 State 之后。
getSnapshotBeforeUpdate()：顾名思义，此方法可以在重新渲染/更新之前访问 Props 和 State 数据。
componentDidUpdate()：与 componentDidMount() 非常相似，在 DOM 中更新组件后调用此方法。
component willUnmount()：它用于清理在 componentWillMount 期间构造的任何元素。

注意：如果你真的想深入学习 React，可以去学习SleeplessYogi 的《从HTML 到 React》课程。真的很棒！

React 是迄今为止最流行和使用最广泛的 JavaScript UI 库之一，对于 Web 开发人员来说，如果要专业地构建网站，学习（或替代）它非常重要。

我会撰写更多关于 React 的文章，包括 React Hooks。所以请务必关注此博客并及时了解最新动态。

感谢您的阅读。

文章来源：https://dev.to/ubahthebuilder/learn-react-in-plain-english-3php