React学习-day01

day-01

react

React 是一个用于构建用户界面的 JavaScript 库。

react特点

• 声明式
• 组件式
• 一次学习,随处使用

使用 React 除了可以开发 Web 应用，还可以使用 React Native 开发原生移动应用，甚至可以开发 VR（虚拟现实）应用（React 360）。

react基本使用

1.下包

npm i react react-dom

2.引入js文件

先引入react,再引入react-dom

3.创建react元素

4.渲染react元素

React脚手架的基本使用

脚手架创建项目

1.初始化项目,命令:

npx create-react-app my-app

2.code .在当前文件夹打开vscode

3.启动项目,在项目根目录执行命令:

npm start

渲染自己的界面

使用步骤

1.删除 src 和 public 目录中的所有内容。

2.新建 public/index.html。

3.新建 src/index.js 文件。

4.引入 React 核心库和涉及 DOM 操作的包。

import React from 'react'
import ReactDom from "react-dom"

5.调用 React.createElement() 方法创建 React 元素。

// 标签名、标签属性、标签内容，返回的是一个 React 元素（虚拟 DOM）
//React.createElement('标签名', { 标签上的属性1：值1 }, 子元素1, 子元素2)
const title = React.createElement('h1', null, 'Hello World')

6.调用 ReactDOM.render() 方法渲染 React 元素到页面。

//参数:渲染谁,渲染到哪里
ReactDOM.render(title, document.querySelector('#root'))

jsx基本使用

JSX 是什么

JSX 是 JavaScript XML 的简写，表示可以在 JavaScript 代码中写 XML（HTML） 格式的代码。

优势：声明式语法更加直观，与 HTML 结构相同，降低了学习成本，提高了开发效率，JSX 是 React 的核心之一。

​ JSX是React的核心内容

JSX 是如何工作的

🤔 换句话说，JSX 并不是标准的 ECMAScript 语法，为什么 React 脚手架中可以直接使用 JSX 呢？

• JSX 需要使用 Babel 编译成 React.createElement() 的形式，然后配合 React 才能在浏览器中使用，而 create-react-app 脚手架中已经内置了 Babel 及相关配置。
• 编译 JSX 语法的包为：[@babel/preset-react]

JSX注意点:

1. 必须有 1 个根节点，或者虚拟根节点 <></>、<React.Fragment></React.Fragment>。
2. 属性名一般是驼峰的写法且不能是 JS 中的关键字，例如 class 改成 className，label 的 for 属性改为 htmlFor，colspan 改为 colSpan。
3. 元素若没有子节点，可以使用单标签，但一定要闭合，例如 <span/>。
4. React@16.14 之前需要先引入 React 才能使用 JSX（这个也好理解，因为 JSX 最后还是要被转成 React.createElement() 的形式）。
5. 换行建议使用 () 进行包裹，防止换行的时候自动插入分号的 Bug。

//使用小括号包裹JSX
const div=(
    <div>Hello JSX</div>
)

使用表达式

能够产生结果的式子,一般由运算符或变量组成

单大括号中可以使用任意的表达式（可以产生结果的式子）。

• 普通的简单数据类型。

const name = 'zs'
const age = 18
const title = (
    <h1>
        姓名：{name}, 年龄：{age}
    </h1>
)

• 对象中的属性。

const car = {
    brand: '玛莎拉蒂',
}
const title = <h1>汽车：{car.brand}</h1>

• 数组中的某一项甚至整个数组。

const friends = ['张三', '李四']
const title = <h1>汽车：{friends}</h1>

• 可以调用方法。

function sayHi() {
    return '你好'
}
const title = <h1>姓名：{sayHi()}</h1>

注意

• JS 对象虽然也是表达式，但是不能直接嵌套在 {} 中，一般只会出现在 style 属性中。
• JSX 本身也是表达式。

const span = <span>我是一个span</span>
const title = <h1>盒子{span}</h1>

小结

• JSX 中可以包含任意的表达式（除了对象）。
• JSX 中不能放语句，例如 if、switch、for、while 等。

条件渲染

内容

📝 需求：isLoading 是 true，显示“加载中…”，否则显示“加载完毕！”。

import ReactDOM from 'react-dom'

const isLoading = true

const loadData = () => {
    if (isLoading) {
        return <h2>数据加载中，请稍后...</h2>
    }
    return <h2>数据加载完成，此处显示了加载后的数据</h2>
}

ReactDOM.render(loadData(), document.querySelector('#root'))

三元表达式的写法如下。

const loadData = () => {
    return <h2>{isLoading ? '数据加载中，请稍后...' : '数据加载完成，此处显示了加载后的数据'}</h2>
}

JSX的列表渲染

JSX 中使用数组的 map 方法来生成列表结构。

关于 key

1. 特点：key 值要保证唯一，尽量避免使用索引号，key 在最终的 HTML 结构中是看不见的。
2. 加在哪里：map() 遍历谁，就把 key 加在谁上。
3. 作用：React 内部用来进行性能优化时使用的，key 在最终的 HTML 结构中是看不见的。

样式处理

目标

掌握 React 中使用样式的两种方式。

行内样式

• 语法

<元素 style={ {css属性1：值1,css属性2：值2} }></元素>

• 需求

• 代码

<div style={{ width: 200, height: 200, lineHeight: '200px', backgroundColor: 'black', color: 'white', textAlign: 'center', fontSize: 30 }}>React</div>

• 注意点

  a，为啥有两个{{ }}，外层的 {} 表示要开始写 JS 表达式了，内层的 {} 表示是一个对象。

  b，属性名是小驼峰格式，例如 background-color 需要写成 backgroundColor。

  c，属性值是字符串，如果单位是 px，可以简写成数值。

className

• 用 className 定义类名。
• 在 src 目录中准备 index.css 文件，然后在 index.js 文件中通过 import './index.css' 引入文件。

index.css
.title {
    width: 200px;
    height: 200px;
    color: white;
    background-color: black;
}
index.js
import './index.css'
;<div className='title'>Hello React</div>

小结

• 类名使用 className，推荐。
• 行内样式，<div style={{ color: 'red' }}>Hello</div>。

React组件

组件就是页面中的一部分。

特点

独立、可复用、可组合。

分类

• 功能使用：UI 组件（AntD）和业务组件（留言板）；普通组件（在一个组件中直接使用的组件）和路由组件（通过路由跳转访问到的组件）。
• 创建方式：函数组件和类组件。

函数式组件

内容

• 概念

  通过函数创建出来的组件，又称简单组件或无状态组件（React16.8 以后函数式组件也可以拥有自己的状态），本质上来说就是一个 JS 函数。

• 步骤

  1. 先定义。

     a，函数名称必须以大写字母开头。

     b，必须有返回值，返回值表示该组件的结构，如果不想渲染任何内容，可以 return null。

  2. 再使用。

     a，<函数名/>，单标签闭合。

     b，<函数名></函数名>，双标签。

• 注意点

  函数式组件中的 this 指向是 undefined，因为 Babel 编译后的代码开启了严格模式

import ReactDOM from 'react-dom'

function Hello() {
    return <div>这是第一个函数组件</div>
}
// const Hello = () => <h1>这是一个函数组件！</h1>;

// 把函数的名字作为标签名进行渲染，可以使用单闭合，或双标签的形式
ReactDOM.render(<Hello />, document.getElementById('root'))

函数式组件渲染过程

🧐 React 解析 <Hello/> 标签，发现是大写开头的会被当做组件进行解析，解析的时候又发现其是一个函数式组件，随后会调用此函数，将返回的虚拟 DOM 转为真实 DOM，并渲染到页面中。

类组件

内容

a，使用 ES6 语法的 class 创建的组件，又称复杂组件或有状态组件。

b，类名称也必须要大写字母开头。

c，类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或者属性。

d，类组件必须提供 render() 方法，此方法中的 this 指向此组件的实例对象，此方法中必须要有 return 返回值。

class Hello extends React.Component {
    render() {
        return <div>这是第一个类组件</div>
    }
}
ReactDOM.render(<Hello />, document.getElementById('root'))

🧐 了解 ReactDOM.render() 解析类式组件的过程：React 解析 <Hello/> 标签，发现是大写开头的会被当做组件进行解析，解析的时候又发现其是一个类组件，会自动的 new 出来该类的实例，并通过实例调用原型上的 render() 方法，将 render() 方法返回的虚拟 DOM 转为真实 DOM，并渲染到页面中。

提取组件

目标

能够将 React 组件提取到独立的 JS 文件中。

内容

思考：项目中的组件多了之后，该如何组织这些组件呢？

• 选择 1：将所有组件放在同一个 JS 文件中。
• 选择 2：将每个组件放到单独的 JS 文件中。

实现

1. 创建 App.js，创建组件（函数 或 类）。
2. 在 App.js 中通过 export default 默认导出该组件。
3. 在 index.js 中通过 import 默认导入 App 组件。
4. 渲染组件。

代码

App.jsx
import React, { Component } from 'react'

export default class App extends Component {
    render() {
        return <div>Hello World</div>
    }
}
index.js
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App />, document.querySelector('#root'))