终极 React.js 备忘单：轻松掌握 React.js⚛️

介绍

React.js 已成为现代 Web 开发中用于创建交互式和动态用户界面的主要内容。其基于组件的架构通过提供声明性 UI 并利用虚拟 DOM 的概念，简化了单页应用程序 (SPA) 的开发。本备忘单旨在指导您了解 React.js 的基本知识，从了解基础知识到掌握高级技术。无论您是初学者还是希望提高自己的技能，本指南都是您掌握 React.js 的首选资源。

1. 了解 React.js 的基础知识

组件： React 应用程序的构建块，组件封装了 UI 元素的结构和行为。它们可以简单也可以复杂，并且可以促进可重用性。

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}</h1>;
}

JSX (JavaScript XML)： JSX 允许您直接在 JavaScript 代码中编写类似 HTML 的语法，使其更直观、更易于使用。

const element = <h1 id="Hello-world">Hello, world!</h1>;

虚拟 DOM：React 的 Virtual DOM 是实际 DOM 的轻量级副本，它允许高效的更新和渲染，从而提高应用程序性能。

2. 必要的工具和库

Babel： 一个 JavaScript 编译器，使您能够编写现代 JavaScript 代码（包括 JSX），并将其转换为浏览器兼容的版本。

// Babel transforms this JSX:
const element = <h1 id="Hello-world">Hello, world!</h1>;
// Into this:
const element = React.createElement('h1', null, 'Hello, world!');

Webpack： 一个模块捆绑器，可帮助管理项目资产和依赖项，优化它们以实现高效加载。

Redux： 一个状态管理库，可确保一致且可预测的应用程序状态，通常与 React.js 一起使用。

import { createStore } from 'redux';

function reducer(state = {}, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

3. 功能组件和钩子

函数式组件是简单、可重用的函数，它们接受 props 并返回 JSX。它们因其简单性和易于测试而受到青睐。通过使用 React hooks，您可以管理功能组件内的状态和生命周期方法，使它们更加强大。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
}

关键挂钩：

• useState： 管理功能组件内的状态。
• useEffect: 处理数据获取或订阅等副作用。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

• useContext: 提供了一种通过组件树传递数据的方法，无需手动向下传递 props。

4. 使用 JSX

JSX 允许您将类似 HTML 的语法与 JavaScript 表达式混合在一起。此功能使您的组件更加动态和交互。使用 JSX 有条件地渲染元素、映射数组以及将变量直接嵌入到您的 UI 中。

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

5. 属性（道具）

Props 是一种将数据从父组件传递给子组件的方法，使您能够控制子组件的行为和外观。 Props 使您的组件可重用且可维护。

function Greeting(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}</h1>;
}

// Usage
<greeting name="Sara"></greeting>

6. React 中的样式

内联样式：使用 JavaScript 对象直接在组件中定义样式。内联样式可以根据组件状态或 props 动态调整。

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray',
};

function StyledComponent() {
  return <div style="{divStyle}">Styled with Inline CSS</div>;
}

CSS-in-JS 库： Styled Components 或 Emotion 等库允许您在 JavaScript 代码中编写 CSS，将样式和逻辑封装在一起以实现更好的可维护性。

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

7. 状态管理

状态是控制组件行为和渲染的数据。使用 useState 钩子来管理本地组件状态，并使用 setState 在状态改变时触发重新渲染。

function Example() {
  const [state, setState] = useState({ count: 0 });

  return (
    <div>
      <p>You clicked {state.count} times</p>
      <button onclick="{()"> setState({ count: state.count + 1 })}>
        Click me
      </button>
    </div>
  );
}

8. 处理事件

React 提供了一种通过事件处理程序处理用户交互的简单方法。将事件处理程序绑定到您的组件方法，并使用事件对象来管理用户操作，例如单击、表单提交和输入更改。

function handleClick(e) {
  e.preventDefault();
  console.log('The link was clicked.');
}

<a href="#" onclick="{handleClick}">Click me</a>

9. 条件渲染

条件渲染允许组件根据特定条件渲染不同的输出。利用 JavaScript 的条件语句（例如 JSX 中的 if-else 或三元运算符）来动态呈现内容。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1 id="Welcome-back">Welcome back!</h1>;
  }
  return <h1 id="Please-sign-up">Please sign up.</h1>;
}

10.反应路由器

React Router 使您能够创建具有多个视图和无缝导航的 SPA。定义路线并将其链接到组件，以允许用户轻松浏览您的应用程序。它还支持动态路由和嵌套路由，增强应用导航的灵活性。

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <router>
      <div>
        <nav>
          <link to="/">Home
          <link to="/about">About
        </nav>
        <route path="/" exact component="{Home}"></route>
        <route path="/about" component="{About}"></route>
      </div>
    </router>
  );
}

Conclusion

Mastering React.js opens the door to creating powerful and efficient web applications. This cheat sheet covered the fundamentals, tools, and advanced concepts you need to know. Keep practicing, stay updated with the latest trends, and explore the vast React.js ecosystem to continue growing as a React developer.

以上是终极 React.js 备忘单：轻松掌握 React.js⚛️的详细内容。更多信息请关注PHP中文网其他相关文章！