React基础

被楓吹过的晨

已于 2022-04-23 21:49:36 修改

阅读量1.5k

点赞数

文章标签：前端 react

于 2022-04-23 21:47:01 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66430291/article/details/124369861

版权

本文介绍了React的核心概念，如声明式编程、组件化和跨平台特性，以及如何结合react-router和redux进行应用架构。通过讲解JSX的基本使用、条件渲染、列表渲染和样式管理，展示如何利用这些技术高效开发用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 是一个用于构建用户界面的 JavaScript 库，是 Facebook 开源的

可以理解它只负责 MVC 中的视图层渲染，不直接提供数据模型和控制器功能

react-router 实现路由，redux 实现状态管理，可以使用它们来构建一个完整应用

特点:

声明式
组件化
跨平台编写

React 脚手架

方式一

全局安装 npm i create-react-app -g

创建项目 create-react-app 项目名称

启动项目 npm run start

方式二

npx create-react-app 项目名称

启动项目 npm start

基本使用

导入 react 和 react-dom 两个包
使用 react 创建 react 元素(虚拟DOM)
使用 react-dom 渲染 react 元素

//  导包
import React from 'react';
import ReactDom from 'react-dom';

//  创建 react 元素
const div = React.createElement('div', { id: 'el' }, 'Hello React');

//  渲染 react 元素
ReactDom.render(div, document.getElementById('root'));

JSX

JavaScript XML 的简写，表示了在 JavaScript 中书写 XML 格式的代码。它是 React 的核心内容，可以让我们在 React 中创建元素更加简单，更加直观，提高开发效率

基本使用

//  导包
import React from "react";
import ReactDOM from "react-dom";

//  创建
const div = (
  <div className='box'>
    <h1>JSX</h1>
    <ul>
      <li>abc</li>
      <li>opq</li>
      <li>xyz</li>
    </ul>
  </div>
)

//  渲染
ReactDOM.render(div,document.getElementById('root'))

语法:

使用 {变量/表达式} 渲染数据
对象不能直接渲染,因为对象不可以作为 react 元素
布尔值渲染不出来, 但作为判断有效
双标签必须闭合
注释写法 {/* 注释内容 */}
一些标签的属性发送变化, class 变成 className , label 的 for 属性变成 htmlFor
多个单词组成的属性要变成驼峰命名
标签的嵌套一定符合严格语法要求
属性绑定 <标签属性={变量} 属性={'字符串'+变量}>
一个 JSX 片段建议使用圆括号包裹 ()
一个 JSX 片段必须只有一个根标签

根标签可以用 <>空标签包裹元素</>

也可以用 <React.Fragment>包裹元素</React.Fragement>

JSX 条件渲染

if/else 条件渲染

const loading = true;

const getContent = () => {
  if (loading) {
    return <div>正在加载...</div>;
  } else {
    return <div>数据加载完毕，这是显示数据</div>;
  }
};

const div = <div>{getContent()}</div>;

三元表达式

const loading = true;

const div = (
  <div>
    {loading ? <div>正在加载...</div> : <div>数据加载完毕，这是显示数据</div>}
  </div>
);

逻辑运算

const loading = true;

const div = (
  <div>
    {loading && <div>正在加载...</div>}
    {loading || <div>数据加载完毕，这是显示数据</div>}
  </div>
);

JSX 列表渲染

const list = ['zhangsan', 'lisi', 'wangwu'];

const div = (
  <ul>
    {list.map((item,index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

//  key={唯一标识}

JSX 样式 - style