1.如何引入React(开发基本不使用这种方式)
- CDN引入 （注意顺序）
- 引入React：https：//.../react.x.min.js
- 引入 ReactDOM：https://.../react-dom.x.min.js
cjs 和 umd 的区别
- cjs 全称CommonJS，是Node.js 支持的模块规范
- umd是统一模块定义,兼容各种模块规范(含浏览器)
- 理论上优先使用umd，同时支持Node.js和浏览器
- 最新的模块规范是使用import和export关键字
通过webpack引入React
- 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
2. 开始创建React应用
yarn global add create-react-app
create-react-app demo1(文件名)
然后一个React项目便初步搭建
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>你好</div>,
document.getElementById('root')
);
屏幕显示'你好'
3. React 初体验
对比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算法
4. JSX初体验
Vue的模板写法 Vue-loader
.vue文件里写
<template> <script> <style>通过vue-loader变成一个构造选项
React的 JSX
可以把
<button onClick="add">+1</button>变成
React.createElement('button',{onClick:...},'+1')与Vue-loader 类似
在 React 这里叫做 babel-loader ，并且被内置在webpack里面了
当然也可以使用 CND 引入 babel-loader
使用 JSX
- 方法一
- CND引入
- 引入babel.min.js
- 把<script>改成<script type="text/babel">
- babel会自动进行转译(可以理解为翻译),此处画图
- 这种方式似乎并不支持src
- 在生产环境下尽量不要使用 CND引入，效率太低
- 他要下载一个 babel.min.js
- 它还要在浏览器端把 JSX 翻译成 JS
// 引入 JSX 后的写法
<script type='text/babel'>
let n = 0;
const App = () => (
<div> // 标签直接写
{n} // 变量使用
<button
onclick = { // 函数花括号括起来
() => {
n++;
render();
}
}
>
+1
<button>
</div>
);
const render = () => React.render(<App />,document.querySelector('#app'));
render();
</script>
- 方法二
可以使用 webpacl + babel-loader
- 方法三
使用 create-react-app
- 跟@vue/cli用法类似
- 全局安装yarn global add create-react-app
- 初始化目录create-react-app react-demo-1
- 进入目录cd react-demo-1
- 开始开发yarn start
- 这时App.js便会默认就使用 jsx 语法
- 这是因为webpack 让JS默认走babel-loader
注意事项
<div className='red'>n</div> <!-- 类名要写成className -->因为这会被翻译成
React.createElement('div',{className:'red'},'n');标签里面的所有JS代码都要使用 {} 花括号包起来
5. 条件判断
在 React 里面
const Compomnent = () => {
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 content = (
<div>
{
n % 2 === 0? <div> n是偶数 </div> : <span> n是奇数 </span>
}
</div>
)
return content
}
还可以写成
const Component = () => {
const inner = n% 2 ===0? <div> n是偶数 </div> : <span> n是奇数 </span>
const content = (
<div>
{ inner }
</div>
)
return content
}
如果想要使用 if else
const Component = () => {
let inner
if(n%2===0){
inner = <div>n是偶数</div>
} else {
inner = <span> n是奇数 </span>
}
const content = (
<div>
{ inner }
</div>
)
return content
}
6. 循环语句
在 React 里面使用循环
const Component = (props) => {
return props.number.map((n,index) => {
return <div>下标{index}值为{n}</div>
})
}
// 如果需要使用外面的 div，可以写成
const Component = (props) => {
return (
<div>
{
props.number.map((n,index) => {
return <div> 下标 {index} 值为 {n} </div>
})
}
</div>
)
}
还可以这样写
const Component = (props) => {
const array = []
for(let i = 0; i<props.length;i++){
array.push(<div> 下标{i} 值为 {props.numbers[i]} </div>)
}
return <div>{ array }</div>
}
