React 基础

React  特点

• 声明式

只需要描述 UI（HTML）看起来是什么样子，就像写 HTML 一样简单，React 内部负责渲染 UI，并在数据变化时自动更新 UI。

const jsx = (
    <div className='app'>
        <h1>Hello World！</h1>
        <p>动态数据：{count}</p>
    </div>
)

• 组件化

把复杂的页面拆分成一个一个的单元，这些组成页面的基本单元就是组件，通过组合、复用组件来编写复杂界面的方式，就是组件化。

• 一次学习，随处使用

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

• 相比较于 Vue，React 强调尽可能的利用 JS 语言自身的能力来编写 UI，而不是通过造轮子增强 HTML 的功能。

脚手架的创建项目

1. 命令：npx create-react-app  my-react
2. 启动项目：yarn start or npm start

JSX

JSX 是javascript XML的简写，表示可以在 javascript 代码中写 XML 格式的代码

优势KL：声明式语法更加直观，与HTML结构相同，降低了学习的成本，提高了开发效率，

JSX是 React的核心之一

import React from 'react'
// DOM渲染包
import ReactDom from 'react-dom'

// JSX
const ele = (
	<ul title="hello world">
		<li>React</li>
		<li>Vue</li>
		<li>A</li>
	</ul>
)

// 渲染
ReactDom.render(ele, document.querySelector('#root'))

JSX是如何工作的

• JSX 需要使用 Babel 编译成 React.createElement() 形式，然后配合React才能 在浏览器中使用，而 create-react-app 脚手架中已经内置了Babel及相关配置

JSX的注意点

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

使用表达式

普通的简单的数据类型

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中可以包含任意形式的表达式（除了对象）

条件渲染

import React from 'react'
// DOM渲染包
import ReactDom from 'react-dom'

// 函数
// function render() {
// 	const isLoading = true
// 	let ele
// 	if (isLoading) {
// 		ele = <h1>加载中...</h1>
// 	} else {
// 		ele = <h1>加载完毕...</h1>
// 	}
// 	return ele
// }

// 三元表达式
function render() {
	const isLoading = true
	return <h1>{isLoading ? '加载中...' : '加载完成...'}</h1>
}

// 渲
ReactDom.render(render(), document.querySelector('#root'))

样式处理

语法

<元素 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>

注意

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

属性名是小驼峰式的

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

函数式组件

通过函数创建出来的组件，又称简单组件或无状态组件，本质上来说就是一个js函数

1. 先定义。

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

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

2. 再使用。

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

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

注意

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

多个组件渲染

import React from 'react'
// DOM渲染包
import ReactDom from 'react-dom'

// 函数组件
// 先定义
function Hello1() {
	return <h1>Hello React</h1>
}
function Hello2() {
	return <h1>Hello React</h1>
}
const el = [ <Hello1 />, <Hello2 /> ]
// 渲染
// 单标签
ReactDom.render(el, document.querySelector('#root'))

类组件

• 使用ES6语法 class 创建的组件，又称复杂组件或有状态组件
• 类名称也必须要大写字母开头
• 类组件应该继承 React.Component 父类 ，从而可以使用父类中提供的方法或属性
• 类组件必须提供 render() 方法，此方法中的this 指向此组件的实例对象，此方法中必须要有return 返回值

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

import React from 'react'
// DOM渲染包
import ReactDom from 'react-dom'

// 类组件
class Hello extends React.Component {
	render() {
		return <h1>Hello Word</h1>
	}
}

// 渲染
// 解析 <Hello /> 标签 如果是大写开头，会当作组件进行解析
// 又会发现是一个类组件，内部会new Hello() 得到一个组件实例，调用render 方法 （实例.render）拿到 JSX结构
// 转换成真实 DOM 渲染到页面上面
ReactDom.render(<Hello />, document.querySelector('#root'))