Kai Site

简体中文

English

简体中文

English

外观

React 基础

1567 字约 5 分钟

2025-01-20

本页定位

这篇笔记作为 React 入门速览，聚焦环境搭建、JSX、组件、事件和状态。

学习重点

  • 快速建立 React 组件化开发的基本心智。
  • 掌握 JSX、props、state、事件绑定和列表渲染。
  • 适合作为进入完整 React 笔记前的轻量索引。

1-1 开发环境搭建

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

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

    注意

    创建React项目的更多方式 https://zh-hans.react.dev/learn/start-a-new-react-project

1-2 JSX基础

1-2-1 什么是JSX

概念：JSX是JavaScript和XMl(HTML)的缩写，表示在JS代码中编写HTML模版结构，它是React中构建UI的方式

const message = 'this is message'

function App(){
  return (
    <div>
      <h1>this is title</h1>
      {message}
    </div>
  )
}

优势：

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

1-2-2 JSX的本质

JSX并不是标准的JS语法，它是 JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中使用

image.png

1-2-3 JSX高频场景-JS表达式

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

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

    注意

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

const message = 'this is message'

function getAge(){
  return 18
}

function App(){
  return (
    <div>
      <h1>this is title</h1>
      {/* 字符串识别 */}
      {'this is str'}
      {/* 变量识别 */}
      {message}
      {/* 变量识别 */}
      {message}
      {/* 函数调用 渲染为函数的返回值 */}
      {getAge()}
    </div>
  )
}

1-2-4 JSX高频场景-列表渲染

image.png

在JSX中可以使用原生js种的map方法 实现列表渲染

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

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

1-2-5 JSX高频场景-条件渲染

image.png

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

const flag = true
const loading = false

function App(){
  return (
    <>
      {flag && <span>this is span</span>}
      {loading ? <span>loading...</span>:<span>this is span</span>}
    </>
  )
}

1-2-6 JSX高频场景-复杂条件渲染

image.png

需求：列表中需要根据文章的状态适配 解决方案：自定义函数 + 判断语句

const type = 1  // 0|1|3

function getArticleJSX(){
  if(type === 0){
    return <div>无图模式模版</div>
  }else if(type === 1){
    return <div>单图模式模版</div>
  }else(type === 3){
    return <div>三图模式模版</div>
  }
}

function App(){
  return (
    <>
      { getArticleJSX() }
    </>
  )
}

1-3 React的事件绑定

1-3-1 基础实现

React中的事件绑定，通过语法 on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

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

1-3-2 使用事件参数

在事件回调函数中设置形参e即可

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

1-3-3 传递自定义参数

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参

function App(){
  const clickHandler = (name)=>{
    console.log('button按钮点击了', name)
  }
  return (
    <button onClick={()=>clickHandler('jack')}>click me</button>
  )
}

注意

注意：不能直接写函数调用，这里事件绑定需要一个函数引用

1-3-4 同时传递事件对象和自定义参数

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

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

1-4 React组件基础使用

1-4-1 组件是什么

概念：一个组件就是一个用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以服用多次 image.png

1-4-2 组件基础使用

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

// 1. 定义组件
function Button(){
  return <button>click me</button>
}

// 2. 使用组件
function App(){
  return (
    <div>
      {/* 自闭和 */}
      <Button/>
      {/* 成对标签 */}
      <Button></Button>
    </div>
  )
}

1-4-3 组件状态管理-useState

3-1 基础使用

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果 和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）

image.png

function App(){
  const [ count, setCount ] = React.useState(0)
  return (
    <div>
      <button onClick={()=>setCount(count+1)}>{ count }</button>
    </div>
  )
}

3-2 状态的修改规则

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

image.png

let [count, setCount] = useState(0);

const handleClick = () => {
    // 直接修改 无法引发视图更新
    count++;
    console.log(count);
}

const handleClick = () => {
    // 作用：
    // 1. 用传入的新值修改count
    // 2. 重新使用新的count渲染UI
    setCount(count + 1);
}

3-3 修改对象状态

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

image.png

const [form, setForm] = useState({
    name: 'jack',
});

const handleChangeName = () => {
    form.name = 'john';
}

const [form, setForm] = useState({
    name: 'jack',
});

const handleChangeName = () => {
    setForm({
        ...form,
        name: 'john',
    });
}

1-4-4-组件的基础样式处理

React组件基础的样式控制有俩种方式，行内样式和class类名控制

<div style={{ color:'red'}}>this is div</div>
.foo{
  color: red;
}
import './index.css'

function App(){
  return (
    <div>
      <span className="foo">this is span</span>
    </div>
  )
}
2023-2025 Powered by Kai with ❤️