终极 React 速查表

AWS GenAI 直播！

React 是一个开源的前端 JavaScript 库，用于构建用户界面或 UI 组件。与 Vue.js 类似，它使我们能够在应用程序中创建组件、布局等。在本文中，我们将通过 React 速查表 (React Cheat Sheet) 全面讲解 React.js 的所有基础知识。

安装

在我们的应用程序中使用 React 非常容易，因为我们可以使用 CDN 添加它或使用 CLI 从 npm 安装它。

要使用 CDN 添加 React，请在 html 中添加此脚本标签

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

或者您可以使用 NPM 安装它：

npm install react react-dom --save

该--save标志将添加react到react-dom我们的应用程序依赖项中。

使用 create-react-app

Create React App是一款在构建 React 应用时为您提供巨大优势的工具。它使我们能够无需任何配置即可搭建一个新的 React 项目。我们可以通过在终端上运行以下命令在本地计算机上全局安装它：

npm install -g create-react-app

该-g命令将在我们的本地机器上全局安装它。

安装完成后，我们现在可以使用以下命令搭建一个 React 项目：

create-react-app <name of project>

设置完成后，我们现在可以进入项目，然后下载项目依赖项

cd <name of project>
npm install --save

安装后，为了服务器您的应用程序，请npm start在您的终端上运行。

React DOM

为了设置一个简单的 React DOM，我们可以导入 ReactDOM，这就是我们将用于渲染的。

import React from "react";
import ReactDOM from "react-dom";

//define a template
const warning = <h1>Hello,I'm Sunil</h1>;

// ReactDOM.render(root node, mounting point)
ReactDOM.render(warning, document.getElementById("root"));

该ReactDOM.render()函数接受两个参数，HTML 代码和将安装代码的 HTML 元素。

功能组件

这也称为无状态组件，它只是一个简单的 JavaScript 函数，它以 props 作为参数并返回一个反应元素：

import React from 'react';

const Button = () =>
    <button> Apply</button>

export default Button;

现在要使用这个组件，我们可以这样做：

import React from 'react';

const Button = ({ onClick, className = 'button', children  }) =>
    <button
        onClick={ onClick }
        className={ className }
        type='button'
    >
        { children }
    </button>

export default Button;

类组件

类组件的行为类似于接收 props 的函数，但该函数还将私有内部状态视为控制返回的 JSX 的附加输入。

import React, { Component } from 'react';

class MyComponent extends Component {
    render() {
        return (
            <div className="main">
                <h1>Helo Devas</h1>
            </div>
        );
    }
}

export default MyComponent;

我们可以通过以下方式传递信息：

import React, { Component } from 'react';

class MyComponent () extends Compnent {
    constructor ( props ) {
    super(props);
    this.state = { message: 'Helo Devas' }
    };

    render() {
        return (
            <div className="main">
                <h1>{ this.state.message }</h1>
            </div>
        );
    }
}

export default MyComponent;

生命周期钩子

React 组件会经历三个阶段：挂载、更新和卸载。
当组件即将被挂载时，React 会调用 4 个内置方法：

构造函数()
获取派生状态（来自Props）
使成为（）
组件挂载()

安装阶段

Constructor()

此方法在组件初始化时，在组件中的任何其他操作之前调用，并且是设置初始值state和其他初始值的自然位置。此方法将 a 作为参数传递，并且始终在设置任何状态或其他任何内容之前prop调用。super(prop)

class Footer extends React.Component {
constructor(props) {
    super(props);
    this.state = {name: "Sunil"};
  }
  render() {
    return (
      <h1>My name is {this.state.name}</h1>
    );
  }
}

ReactDOM.render(<Footer />, document.getElementById('root'));

getDerivedStateFromProps()

此方法在 DOM 元素渲染之前调用。组件实例化后以及组件接收到新的 props 时都会调用此方法。

class Footer extends React.Component {
constructor(props) {
    super(props);
    this.state = {name: "Sunil"};
  }
static getDerivedStateFromProps(props, state) {
    return {name: props.favcol };
  }

  render() {
    return (
      <h1>My name is {this.state.name}</h1>
    );
  }
}

ReactDOM.render(<Footer />, document.getElementById('root'));

Render()

此方法将定义的 HTML 输出到 DOM 中。此方法为必需方法。

class Footer extends React.Component {
  render() {
    return (
      <h1>This template will be rendered using the render function</h1>
    );
  }
}

ReactDOM.render(<Footer />, document.getElementById('root'));

ComponentDidMount()

该方法在组件渲染后立即调用。这里是编写要求组件已放置在 DOM 中的语句的最佳位置。

class Footer extends React.Component {
constructor(props) {
    super(props);
    this.state = {name: "Sunil"};
  }

  componentDidMount() {
    // Everything here runs after the component has been mounted
  }
  render() {
    return (
      <h1>My name is {this.state.name}</h1>
    );
  }
}

ReactDOM.render(<Footer />, document.getElementById('root'));

更新阶段

每当组件状态或 props 发生变化时，组件就会更新。当组件处于此状态时，一些 React 内置方法会被调用。

getDerivedStateFromProps:组件更新后会立即调用此方法。它的作用与挂载阶段的方法基本相同。
ShouldComponentUpdate：此方法返回一个布尔值（True 或 False），指定 React 是否应继续渲染。

shouldComponentUpdate() {
        return true;
    }

render:组件更新时会调用此方法。它会使用新值将 HTML 重新渲染到 DOM 中：

    render() {
        return (
          <h1>This is component is changed</h1>
        );
      }
    }

    ReactDOM.render(<Footer />, document.getElementById('root'));

getSnapshotBeforeUpdate：此方法使您能够在组件更新之前访问道具和状态。

    getSnapshotBeforeUpdate(prevProps, prevState) {
        // get acces to the prepious state here
      }

ComponentDidUpdate：组件更新后调用此方法。

    componentDidUpdate() {
        // do something gere.
       // log the presents state of the component
      }

卸载阶段

这是 React 从 DOM 中移除组件的状态。此阶段带有一个componentWillUnmount内置方法。该方法在组件即将被移除时被调用：

componentWillUnmount() {
    alert("Component has been removed");
  }

道具

Props 是用于将数据从一个组件传递到另一个组件的概念。基本上它用于数据通信：

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div className="app">
                <p>My App {this.props.name}</p>
            </div>
        );
    }
}

//passing the data into the component
class Index extends Component {
    render() {
        return (
            <div className="app">
                <App name="Sunil"/>
            </div>
        );
    }
}

export default Index;

反应地图

我们可以使用该方法迭代项目map。就像在 Vanilla JS 中使用它一样，我们可以创建一个项目数组，然后使用 map 方法：

let test = [1,2,3,4,5,6];
const numberList = test.map(number=>console.log(number))

我们也可以在我们的反应组件中使用它，如下所示：

function App() {
  const people = ['Wisdom', 'Ekpot', 'Sunil','Nirav'];

  return (
    <ul>
      {people.map(person => <Person key={person} name={person} />)}
    </ul>
  );
}

这里我们将它作为数组传递给组件。

活动

与其他框架或库一样，我们可以将事件监听器绑定到模板，这些事件监听定义的方法。在 React 中，我们可以像这样定义一个点击事件：

function App() {

function logSomething() {
    console.log(`Hello i'm sunil`)
  }

return (
    <div>
      <button onClick={logSomething}>Submit</button>
    </div>
  );
}

change我们也可以在输入字段上使用事件监听器：

function App() {

function detectChange() {
    console.log(`Changing`)
  }

return (
    <div>
      <input type="text" name="myInput" onChange={detectChange} />
    </div>
  );
}

状态

状态本质上是数据的存储。我们可以存储对象、数组、字符串，然后在 React 组件中使用它们。要使用状态中存储的数据，我们可以使用this关键字

import React, { Component } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {messages: 0};
    } 

    render() {
        return (
            <div className="app">
                <p>My messages: {this.state.messages}</p>
            </div>
        );
    }
}

export default App;

反应 HMR

热模块重新加载会保留应用程序状态，而完整重新加载则会丢失这些状态。它节省了编译时间，因为它只更新更改的内容，而不是整个应用程序：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render( <MyComponent />, document.getElementById('root') );

if (module.hot) {
    module.hot.accept();
}

React 路由器

为了处理 React 中的路由，我们必须使用 NPM 安装 React 路由器：

npm i --save react-router-dom

要路由到组件，我们可以使用<Route />以路径和路由到的组件作为属性的标签：

import { 
  BrowserRouter, 
  Route 
} from 'react-router-dom'

const Hello = () => <h1>Hello world!</h1>

const App = () => (
  <BrowserRouter>
    <div>
      <Route path="/hello" component={Hello} />
    </div>
  </BrowserRouter>
)

React 状态钩子

这基本上是一个状态管理系统。要使用它，我们必须useState从 React 导入。让我们编写一个简单的方法，当按钮被点击时，状态的值会增加：

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

React 模板

除了上面提到的 React 速查表能帮你更快地创建项目之外，还有另外两个选项可供选择，它们可以节省你的时间、金钱和精力。
(1) Reactjs 模板始终是学习和在 React 项目中使用的最佳选择，可以加快项目的完成速度。它提供了许多现成的、设计精良的组件，可以提高你创建项目的速度。不妨看看WrapPixel上有哪些最佳的 React 模板。 (2) 此外，我们还有另一个React 模板
选项，由AdminMart团队精心打造，他们为模板的创建付出了辛勤的努力。

文章来源：https://dev.to/suniljoshi19/the-ultimate-react-cheat-sheet-3man

终极 React 备忘单 AWS GenAI LIVE！