初学React基础

最近准备跟着黑马React学一下React，扩充一下技术面，打算还是以一边学习一边记笔记为主，进行学习！

1. React介绍

1.1. React是什么？

React是由FaceBook现在称（Meta）开发的开源 JavaScript 库，主要用于构建用户界面，特别是单页应用（SPA）。它采用组件化的方式组织代码，使得复杂 UI 的开发和维护变得更为高效和灵活。

1.2. React的优势

React相比于传统的 DOM 操作和页面构建方式，有更大的优势：

① 虚拟 DOM：React 使用虚拟 DOM（Virtual DOM）来提高性能。虚拟 DOM 是内存中的数据结构，当组件状态改变时，React 计算出最小的 DOM 更新，而不是直接操作实际 DOM，这减少了不必要的渲染和提升了性能。
② 组件化： React 应用基于组件构建，每个组件都是独立的、可复用的代码单元。这种方式促进了代码的模块化，提高了代码的可读性和可维护性。
③ JSX：JSX 语法使得在 JavaScript 中编写 HTML 代码变得简单，提高了开发效率。它允许开发者直接在组件内声明 UI 结构，使得代码更直观。
④ 单向数据流：React 应用通常遵循单向数据流的设计原则，即数据从父组件流向子组件，简化了数据管理和调试。
⑤ 性能优化：React 提供了如 shouldComponentUpdate、React.PureComponent 和 React.memo 等机制，帮助开发者优化性能，避免不必要的组件更新。

1.3. React的市场

React目前在国内用的应该是没有Vue多的，它在国外还有国内一些中大厂比较流行。

2. 开始入门学习React

这个是React的官方中文文档：React 官方中文文档，初学的时候可以进去看几眼。

2.1. create-react-app搭建React开发环境

进行 React开发，首先要进行环境的开发，来看看咋搭建的吧！

create-react-app 是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用，下面是指令的使用和介绍：

npx create-react-app first-react-project
1. npx Node.js工具命令，查找并执行后续的包命令
2. create-react-app 核心包（固定写法），用于创建React项目
3. react-basic React项目的名称（可以自定义）

出了点状况，一直搭建不成功，查了一下npm的镜像，发现：

$ npm config get registry
https://registry.npmjs.org/

居然是这个，赶紧换成淘宝源：

npm config set registry https://registry.npm.taobao.org

重新运行create-react-app

终于成功了...使用WebStorm打开这个项目，启动一下还有看看目录结构：

npm start

(看到这个说明项目搭建成功了，hhh)

接着我们来看看这个项目的结构，下面我对主要的文件的文件夹进行了标注：

我们打开项目的入口文件index.js，如下代码介绍了：React入口文件就是把App根组件渲染到index.html中的<div id="root"></div>中，大概渲染路径就是App -> index.js -> public/index.html


// React的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 导入项目的根组件
import App from './App';

// 把App根组件渲染到id为root的dom节点上，其实就是index.html中的<div id="root"></div>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

2.2. JSX基础学习

1. 基础概念

JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式：

function App() {
  return (
    <div className="App">  // html组件直接写入js
      Hello React
    </div>
  );
}
export default App;

这种结合了html + Js写法的优势在于既拥有了HTML的声明式模版写法也拥有了JS的可编程能力，对于页面的操控会更加便捷。

本质上JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具比如Babel · Babel做解析之后才能在浏览器中运行，我们可以去官网试一试：

2. JSX中使用JS表达式

在JSX中可以通过大括号语法{} 识别 JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等，直接手写代码尝试，初学阶段要多写hhh：

function App() {
    const number = 1;
    const getNumber = () =>{
        return 100;
    }
  return (
    <div className="App">
    {/* 1.   使用引号传递字符串*/}
        {'hello world'}
    {/* 2.   使用Javascript变量*/}
        {number}
    {/* 3.   函数调用  */}
        {getNumber()}
    {/* 4.   方法调用  */}
        {new Date().getTime()}
    {/* 5.   使用JavaScript对象   */}
        <div style={{color:'red'}}>this is red</div>
    </div>
  );
}
export default App;

3. JSX中实现简单列表渲染

function App() {
    const list = [
        {id: 1001, name:'Vue'},
        {id: 1002, name:'Java'},
        {id: 1003, name:'Cpp'},
    ]
    return (
    <div className="App">
        <ul>
            {list.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
    </div>
  );
}
export default App;

4. JSX中实现条件渲染

在React中，可以通过逻辑（ if - else if - else ）与运算符（&&）、三元表达式（?:）实现基础的条件渲染

function App() {
    const articleType = 1; // 1 = article, 2 = video
    const getArticle = () => {
        if(articleType === 1){
            return <div>我是文章</div>
        }else{
            return <div>我是视频</div>
        }
    }
    return (
    <div className="App">
        {getArticle()}
    </div>
  );
}
export default App;

2.3. React事件绑定

1. React基础事件绑定

语法：on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

2. 使用事件对象参数

语法：在事件回调函数中设置形参e

3. 传递自定义参数

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参，不能直接写函数调用，这里事件绑定需要一个函数引用。

4. 同时传递事件对象和自定义参数

语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

2.4. React组件

一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次。

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可。

2.5. useState

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果。本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）和之前学习过的Vue3.0使用ref 和 reactive是一样的效果

const [count, setCount] = useState(0);
1. useState是一个函数，返回值是一个数组
2. 数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3. useState的参数将作为count的初始值

下面写一个实例进行测试：

import {useState} from "react";

function App() {
    const [count, setCount] = useState(0);
    return (
    <div className="App">
        <button onClick={() => setCount(count + 1)}>count is {count}</button>
    </div>
  );
}
export default App;

useState 修改状态的规则：

在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新。

import {useState} from "react";

function App() {
    const [count, setCount] = useState(0);
    const clickHandler = () => {
        // 直接修改无法更新视图
        // count ++;
        // setCount(count);
        setCount(count + 1);
    }
    return (
    <div className="App">
        <button onClick={clickHandler}>count is {count}</button>
    </div>
  );
}
export default App;

对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改:

import {useState} from "react";

function App() {
    const [user, setUser] = useState({
        name: "John",
        age: 20,
        email: "john@gmail.com"
    });
    const clickHandler = () => {
        // 直接修改原对象，不引发视图变化
        // user.name = "Jane";
        // 调用set传入新对象用于修改
        setUser({
            ...user,
            name: "Jane",
            age: 30,
            email: "jane@gmail.com"
        });
    }
    return (
    <div className="App">
        <button onClick={clickHandler}>count is {user.name}</button>
    </div>
  );
}
export default App;