[ React基础与实践 | 青训营笔记 ]

React的基础概念： React是一个由Facebook开发的JavaScript库，用于构建用户界面。它采用了组件化的开发模式，通过将界面拆分成独立的可复用组件来构建复杂的用户界面。 React核心知识: 1.组件（Component）：React的核心概念是组件，组件是构建用户界面的独立单元。每个组件封装了自己的状态（state）和属性（props），并可以根据这些状态和属性渲染UI。组件可以被组合在一起形成更复杂的界面。 2.虚拟DOM（Virtual DOM）：React使用虚拟DOM来管理和更新界面。虚拟DOM是一个轻量级的JavaScript对象，它代表了真实DOM的结构和属性。React通过对比虚拟DOM的差异，最小化地更新真实DOM，提高性能和效率。 3.JSX：JSX是一种JavaScript的扩展语法，允许在JavaScript代码中编写类似HTML的结构。使用JSX，开发者可以直观地描述组件的结构和UI，将HTML和JavaScript结合在一起编写组件。 4.状态（State）：组件的状态是组件内部的可变数据。状态可以通过this.state属性来访问和修改。当状态发生变化时，React会自动重新渲染组件，以反映新的状态。 5.属性（Props）：组件的属性是由父组件传递给子组件的数据。属性是组件之间通信和数据传递的一种方式。通过props，父组件可以向子组件传递数据和回调函数，子组件可以使用这些数据来渲染自己的UI。 6.生命周期（Lifecycle）：React组件具有一系列的生命周期方法，用于在组件的不同阶段执行特定的操作。例如，组件被创建时会调用constructor方法，组件被挂载到DOM时会调用componentDidMount方法，组件被卸载时会调用componentWillUnmount方法等。生命周期方法提供了对组件生命周期的控制和操作。 7.事件处理：React允许在组件中定义和处理各种事件，例如点击事件、输入事件等。通过使用事件处理函数，可以对用户的交互做出响应，并更新组件的状态或执行其他操作。 8.条件渲染：React提供了条件渲染的机制，根据不同的条件渲染不同的UI。可以使用条件语句或三元表达式来决定要渲染的内容。 9.列表渲染：React提供了列表渲染的能力，可以根据数组的内容渲染多个相同或相似的组件。通过遍历数组并使用数组的map方法，可以根据每个数组元素生成对应的组件，并将它们渲染到界面上。 10.受控组件与非受控组件：React中的表单元素可以分为受控组件和非受控组件。受控组件通过state来管理表单元素的值，并响应用户的输入变化。非受控组件则将表单元素的值保存在DOM节点中，并通过ref来获取其值。 11.上下文（Context）：React的上下文机制允许在组件树中共享数据，而不必通过逐层传递props。通过创建上下文提供者和使用上下文消费者，可以在组件之间共享数据，简化组件间的通信。 12.Hooks：Hooks是React 16.8引入的一种新特性，使函数组件能够拥有状态和其他React特性。通过使用Hooks，可以在函数组件中使用状态、副作用、上下文等特性，避免了使用类组件的繁琐和冗长。 13.React Router：React Router是React官方提供的用于处理路由的库。它可以帮助开发者在单页面应用中实现路由功能，支持定义路由规则、导航、参数传递等。 14.Redux：Redux是一个状态管理库，用于管理React应用的全局状态。它将应用的状态存储在一个单一的状态树中，并通过Redux提供的API来修改和访问状态。Redux的设计理念是单向数据流，使状态管理更可预测和可维护。 15.React生态系统：React拥有庞大而活跃的社区，众多开发者贡献了大量的第三方库和工具，形成了丰富的React生态系统。这些库和工具包括UI组件库、状态管理库、开发工具、测试工具等，为React开发提供了更多的选择和便利。

React示例代码片段： 1、Create React App

$ create-react-app YOUR_APP_NAME Create React App 是一个用于创建 React 项目的 CLI。

2、JSX

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

我们可以通过 JSX 在 JavaScript 中编写 HTML。

3、在 JSX 中嵌入表达式

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

只需使用 {} 来包装 JavaScript 表达式。

4、创建一个组件

import React from 'react'

const Hello = () => <div>Hello World</div>

export default Hello

它是一个简单的、无状态的、功能性的组件。

5、创建类组件

import React from 'react'

class Hello extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

export default Hello

6、将值传递给组件

const User = ({name, email}) => {
    <div>
      <div> name: {name} </div>
      <div> email: {email} </div>
    </div>
}

export default User

用法：

<User name="Jon" age="35">

7、组件嵌套

const Child = (props) => (
  <div>{props.message}</div>
)

const Father = () => (
  return (<div>
    <div> I am father</div>
    <Child message="aaa"></Child>
  </div>)
)

8、向组件添加状态

import { useState } from "react";

export default function Counter(){
    // Declare a new state variable, which we'll call "count"
  let [count, setCount] = useState(0)

  return <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}> add</button>
    </div>
}

9、声明多个状态变量

当然，我们可以使用 useStates 定义多个状态。

function ManyStates() {
  // Declare multiple state variables!
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [todos, setTodos] = useState([{ text: 'Eat' }]);
  // ...
}

10、使用效果

import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

11、处理事件

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

12、条件渲染

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

用法：

<Greeting isLoggedIn={false} />

13、列表组件

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

用法：

<NumberList numbers={[1, 2, 3, 4, 5]} />)