React项目开发必备技能

第一阶段

一、搭建开发环境

create-react-app是一个快速 创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用

执行命令：

npx create-react-app react-basic

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

二、JSX概念与本质

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

UI模版的方式

优势：

1. HTML的声明式模版写法
2. JS的可编程能力

三、JSX

1、JSX中使用JS表达式

在JSX中可以通过 大括号语法{} 识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等

1. 使用引号传递字符串
2. 使用JavaScript变量
3. 函数调用和方法调用
4. 使用JavaScript对象

注意：

if语句、switch语句、变量声明属于语句、不是表达式，不能出现在{}中

2、JSX中实现列表渲染

在JSX中可以使用原生JS中的map方法遍历渲染列表

const list = [
    {id:1001,name:'vue'},
    {id:1002,name:'React'}
    {id:1003,name:'Angular'}
]

<ul>
{list.map(item => <li key={item.id}>{item}</li>)}
</ul>

3、JSX中实现条件渲染

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

{flag && <span>this is span</span>}
{loading ? <span>loading...</span> : <span>this is span</span>}

4、JSX中实现复杂条件渲染

自定义函数+if判断语句

const articleType=1
function getArticleTem(){
    if(articleType === 0){
        return <div>我是图文</div>
    }else if(articleType === 1){
        return <div>我是图表</div>
    } else {
        return <div>我是三模</div>
    }
}

function App(){
    return (
    	<div className="App">
    		{getArticleTem()}
    	</div>
    )
}

四、React基础事件绑定

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

function App（） {
		const clickHandler = (e)=> {
            console.log('button按钮点击了'，e)
	}
        return <button onClick={()=>{
                clickHandler("jack")
            }}>click me</button>
}

五、React中的组件

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

//1.定义组件
function Button(){
    //组件内部逻辑
    return <button>click me</button>
}
//2.使用组件
function App(){
    return (
    	<div>
    		<Button/>
            <Button><Button/>
    	</div>
    )
}

六、useState (Hook函数）

useState是一个React Hook (函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果

//useState实现一个计数器按钮
import { useState } from "react";
function App() {
  //1.调用useState添加一个状态变量
  // count 状态变量
  // setCount 修改状态变量的方法
  const [count, setCount] = useState(0);

  // 2.点击事件回调
  const handleClick = () => {
    // 作用:1.用传入的新值修改count
    // 2.重新使用新的count渲染UI
    setCount(count + 1);
  };
  return (
    <div>
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}
export default App;

修改状态的规则

• 修改对象状态

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

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

//useState实现一个计数器按钮
import { useState } from "react";
function App() {
  //1.调用useState添加一个状态变量
  // count 状态变量
  // setCount 修改状态变量的方法
  const [count, setCount] = useState({
    name: "jack",
  });
  // 2.点击事件回调
  const handleClick = () => {
    // 作用:
    // 1.用传入的新值修改count
    // 2.重新使用新的count渲染UI
    setCount({
      ...count,
      name: "joasd",
    });
  };
  return (
    <div>
      <button onClick={handleClick}>
        {count.name}
      </button>
    </div>
  );
}
export default App;

七、组件基础样式方案

React组件基础的样式控制有俩种方式

//导入样式
import './index.css'
const style = {
    color:'red',
    fontSize:"50px"
}
function App() {
  return (
    <div>
      //行内样式
      <span style={
  
  {color:'red',fontSize:'50px'}}>this is style</span>
      <span style={style}>this is style</span>
         //通过class类名控制
         <span className="foo">this is class foo</span> 
    </div>
  );
}
export default App;

八、Lodash

Lodash 是一个非常受欢迎的实用工具库，旨在提供高效、模块化的实用函数，帮助开发者更轻松地处理数组、对象、字符串等常见数据结构。它是对 JavaScript 原生方法的增强和优化，在开发中提供了大量的便捷方法，帮助开发者提高效率，简化代码，广泛应用于前端开发、Node.js 项目等场景 。

// npm安装lodash
npm install lodash
// 在项目中引入lodash
import _ from 'lodash'
// 如果只需要使用某些功能，也可以选择按需导入，减少包的体积
import {
   
    map, debounce, cloneDeep } from 'lodash'
const numbers = [1, 2, 3, 4, 5];
const doubled = _.map(numbers, num => num * 2)
console.log(doubled); // 输出：[2, 4, 6, 8, 10]

九、classnames

classnames 是一个简单而强大的 JavaScript 实用工具库，用于有条件地组合 CSS 类名。它特别适合在 React 等框架中动态设置类名，简化了类名操作，提升了代码的可读性和维护性。它的主要功能是根据条件生成适当的类名字符串。这个库非常小巧，只有几百字节，却能显著简化 CSS 类名的管理。

import React from 'react';
import classNames from 'classnames';

function Button({ isPrimary, isDisabled }) {
  const buttonClass = classNames('btn', {
    'btn--primary': isPrimary,
    'btn--disabled': isDisabled
  });

  return <button className={buttonClass}>Click me</button>;
}

export default Button;

第二阶段

一、受控表单绑定

概念：使用React组件的状态（useState）控制表单的状态

//1.准备一个React状态值
const [value, setValue] = useState("asd");
//2.通过Value属性绑定状态,通过onChange属性绑定状态同步的函数
 	<input
        value={value}
        onChange={(a) => {
          setValue(a.target.value);
          console.log(value);
        }}
      ></input>

二、useRef (React中获取DOM)

在 React 组件中获取/操作 DOM，需要使用 useRef React Hook钩子函数，分为两步：

//1.使用useRef创建ref对象，并与JSX绑定
  const inputRef = useRef(null);
  <input type="text" ref={inputRef}/>
//2.在DOM可用时，通过inputRef.current拿到DOM对象
  console.dir(inputRef.current)

三、组件通信

概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法