75. React起手式

React起手式

如何引入React

对原生JS要求比较高，需要记忆的东西非常少

两种方式

CDN(有点麻烦,不太有人用)

需要引入两个库

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

cjs和umd的区别

cjs全称CommonJS，是Node.js支持的模块规范

umd是统一模块定义，兼容各种模块规范（含浏览器）

理论上优先使用umd，同时支持Node.js和浏览器

最新的模块规范是使用import和export关键字

import

通过webpack引入React

import from

yarn add react react-dom

import React from 'react'
import ReactDOM from 'react-dom'

注意大小写，尽量保持一致

不用自己试，因为等会用create-react-app代替

其他

除webpack外，rollup，parcel也支持上面写法

如何引入React？

新手用create-react-app，老手用webpack/rollup

官方安装说明：https://github.com/facebook/create-react-app

npx create-react-app my-app
cd my-app
npm start

在windows系统中，npx不是太友好，以下是方方上课演示的。

yarn global add create-react-app

React初体验

讲了react createElement

用React实现+1

相当难

想知道失败原因，全靠你的JS基础知识

失败是因为APP=React.create...只执行了一次

如何让它重新执行，以获取n的最新值

记不记得6个6， 函数可以获取最新值

复习：6个6面试题

let i
for(i = 0; i < 6; i++){
 setTimeout(()=>{console.log(i)}, 1000)
}
//一秒钟后会打印6个6

setTimeout(fn, 1000):1000毫秒后执行fn，即不早于1000毫秒

立即执行函数

for(i = 0; i < 6; i++){
 	!function(j){
 		setTimeout(()=>console.log(j),1000)
 	}(i)
}
//i是实参，j是形参

函数与延迟执行

对比普通代码与函数

这是普通代码

let b = 1 + a

这是函数(不讨论参数)

let f = () => 1 + a
let b = f()

普通代码立即求值，读取a的当前值

函数会等调用时再求值，即延迟求值。且求值时才会读取a的最新值

对比React元素和函数组件

对比

App1 = React.createElement('div', null, n)
//App1是一个React元素
App2 = ()=> React.createElement('div',null, n)
//App2是一个React函数组件

启示

函数App2是延迟执行的代码，会在被调用的时候执行

小结

React元素

createElement的返回值element可以代表一个div

但element并不是真正的div(DOM对象)

所以我们一般称element为虚拟DOM对象

()=>React元素

返回element的函数，也可以代表一个div

这个函数可以多次执行，每次得到最新的虚拟div

React会对比两个虚拟div， 找出不同，局部更新视图

找不同的算法叫DOM Diff算法

JSX初体验

想要使用JSX，可以使用CDN，引入babel

webpack内置了babel

create-react-app, 安装好后只剩下index.js和，index.html

import React from 'react'
const App = ()=>{
 return ( //()括号不能省略，否则就是return undefined
 	<div> App组件</div>//div相当于React.createElement()
 )
}

export default App

使用JSX的注意事项

注意className，不是class

插入变量，标签里面所有的JS代码都要用{}包起来

如果你需要变量n，那么就用{}把n包起来 如果你需要对象，那么就要用{}把对象包起来,如 {{name:'Jack'}}

习惯return后面加()

条件判断与循环控制

const Component = () =>{
	return n % 2 === 0 ? <div>n是偶数</div>:
	<span>n是奇数</span>
}

//如果需要外面的div，可以写成
const Component = () => {
	return (
		<div>
		{
			n % 2 === 0 ? <div> n是偶数 </div> : <span> n是奇数</span>
		}
		</div>
	)
}

//还可以写成
const Component = () => {
	const inner = n%2 === 0 ? <div>n是偶数</div>:
	<span>n是奇数</span>
	const content = (
	<div>{inner}</div>
	)
	return content
}

循环语句

const Component = (props) => {
	return props.numbers.map((n,index)=>{
		return <div>下标{index}值为{n}</div>
	})
}

//如果你需要外面的div，可以写成
const Component = (props) => {
	return (<div>
			{
			props.numbers.map((n,index)=>{
				return <div>下标{index}值为{n}</div>
			})
			}
	</div>)
}

//在React里还可以写
const Component = (props) => {
	const array = []
	for(let i = 0; i < props.numbers.length;i++){
		array.push(<div>下标{i}值为{props.numbers[i]}</div>)
	}
	return <div>{array}</div>
}

总结

引入React & ReactDOM

CDN方式：react.js, react-dom.js, babel.js

也可以直接import React from 'react'

React.createElement

创建虚拟DOM对象

函数的作用：多次创建虚拟DOM对象

DOM Diff是什么

JSX

将XML转译为React.createElement

使用{}插入JS代码

create-react-app默认将JS当作JSX处理

条件判断，循环要用原生JS实现

该学Vue还是学React？

都要学