react的超详细讲解

create-react-app
项目目录
在HTML中使用react
1
2
3基础
React的注意事项
模拟的React 和 render
React组件
函数组件
类组件
React 的数据源(props(外部传入，不可修改) ,state(内部自带，可修改))
React 生命周期(钩子函数)
React Event 中的this问题
prop-types
受控与非受控组件
React 是单向数据流
4 超详细讲解
React高性能的体现：虚拟DOM
React Fiber
编写第一个react应用程序
函数组件
es6 class组件其实就是一个构造器,每次使用组件都相当于在实例化组件，像这样：
在16以前的版本还支持这样创建组件, 但现在的项目基本上不用
组件的组合、嵌套
React.createElement
create-react-app
脚手架工具create-react-app
基于webpack的一个工具，帮助我们快速创建一个项目 webpack gulp

npm install create-react-app -g yarn create-react-app -V 查看脚手架工具的版本 create-react-app 项目名字 创建项目 npm run start 开发环境运行 npm run build 打包 npm run eject 解开大礼包 在git仓库做一个commit操作

项目目录
config(vue.config.js) 默认不存在 解开大礼包才会出现 对项目做一些配置 代理 public 资源路径根vue中的public一样 scripts 文件 项目启动文件项目打包文件 src 源码文件 index.js === main.js 入口文件

create-react-app官方的一个生成react项目,安装时后面跟一个项目名称 需要在一个空的文件夹下安装 create-react-app 安装的时候会自动帮我们下载react(需要的react)，react-dom(主要是渲染)，react-script(可以认为继承了webpack的脚手架) 加-g是全局安装 npm install create-react-app myApp //mac 安装需要加 sudo sudo npm install create-react-app myApp

启动服务 npm start 开启本地服务 npm build 打包 npm test jest进行单元测试 npm eject 可以把webpack命令打包出来，方便我们修改webpack文件，但此操作不能回退

cmd
“–exact” “react” "react-dom"dom 渲染 "react-scripts"继承了webpack的脚手架 “cra-template” “–cwd”

react-scripts > jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > left-pad
react-scripts > workbox-webpack-plugin > workbox-build > strip-comments > babel-plugin-transform-object-rest-spread > babel-runtime > [email protected]: core-js@❤️
“react-scripts > [email protected]” has incorrect peer dependency “[email protected]”.
warning “react-scripts > @typescript-eslint/eslint-plugin > [email protected]” has unmet peer dependency “typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta”.
在HTML中使用react

// 创建组件
/*
1.通过React crateClass 方法创建组件
2. 配置项里固定有一个render函数
3. render函数里要求return页面模板
4. 组件也是一个虚拟dom
*/

/*
React.createElement(‘div’,{id:‘test’},[
React.creatElement(‘h1’,{class:‘red’,text:‘jsx语法（vue中的模板）’},[])
React.createElenent(‘p’,{text:123},[
React.craeteElement(‘span’,{text:1})
])
])
语法 糖 class 简化代码少写点
jsx javascript xhtml
可以让我们在js里写html标签
1.标签必须闭合
2.必须有一个根元素
正常的js代码不能直接写标签 jsx 也不行
想使用需要将jsx的语法进行解析
type=‘text/babel’ 是告诉浏览器该标签的内部需要解析jsx
*/

// 注释方式 {/要注释的内容/}
// 控制一个元素的渲染 ||
// 2个元素切换 三元表达式
// 渲染的东西比较多 用函数

/*
react 不允许直接将对象绑定在页面
react 绑定数组到页面回将数组的每一项拆分
*/

/*
事件绑定 原生事件用驼峰命名法 注意传参不能能加（） bind

方法一直接调用处理函数
react 中的事件和原生类似 将原生事件使用变成驼峰命名法 onclick->onClick
默认参数是事件对象
传递参数不能写() 所以通过bind 进行传参 默认参数放到最后
方法二
在事件的函数里 调用目标处理函数
注意 需要手动传递事件对象
*/

/*
setState 通知组件重新渲染一遍
setState 是一个异步的函数
参数1 表示要修改的数据 参数2是一个回调 当数据修改结束后执行
1-2-3-4-1
setState 同步中 修改数据不会直接更新页面 将同一个事件循环所有的setState 合并 更新一次页面
setState 如果在异步中 每一次都会触发页面刷新
*/

/*
使用方式2 通过ref 绑定组件
可以获取组件对象 获取绑定组件的相关方法
*/

/*
组件标签中写的内容不会被渲染
但是可以在组件内部通过 props.childer 获取使用
/
/
组件通信
父子 props 将父组件的数据传递给子组件 ref 获取子组件的方法 由父组件调用
子父 props 将父组件的方法传给子组件调用
兄弟 状态提升 上下文 全局状态管理 redux

父子通信 1 父组件控制子组件元素的渲染
将 控制div显示的state 放到子组件上
子组件有一个修改 state值的方法
通过ref 将父组件调用子组件的方法
/
/
父子通信 2 父组件控制子组件元素的渲染
直接传递数据
1.控制元素渲染的数据放在父组件上
2.修改的方法放在父组件上
3.通过props 将数据传递给子组件
4.父组件调用自己的方法修改
*/

/*
子父通信 子组件控制父组件
1数据在父组件上
2.修改数据的方法在父组件
3.将父组件的方法传给子组件调用
*/

/*
亲兄弟通信
1.子元素控制另一个子元素的div显示
2.控制变量放在父组件
3.控制变量的方法也在父组件上
4.结合父子和子父通信
*/
let Son = React.createClass({
sonfun(){
console.log(‘子组件的方法’)
},
toggle(num1,num2){
console.log(num1,num2)
this.setState({show:!this.state.show})
},
render(){
return(

子组件

子组件:{this.props.children}

{
this.props.sonToggle(6,8)
}}>sonToggle

    {!this.props.show||
}

  

)

}
})
let Son2 = React.createClass({

render(){
return(

子组件2

{
this.props.toggle()
}}>toggle

)
}
})

let Component = React.createClass({
getInitialState(){
console.log(‘初始化state值’) //类似于vue中的data
return {
name:‘韩梅梅’,
hide:true,
num:1,
string:‘呵呵’,
arr:[“呢”,‘he’,‘sdf’],
obj:{us:123,ps:123},
null:null,
undef:undefined,
boolean:true,
tabs:[‘动作’,‘恐怖’,‘动漫’,‘喜剧’],
// tabs:[‘

动作

’,‘

恐怖

’,‘

动漫

’]
// tabs:[

动作

,

恐怖

,

动漫

]
color:false,

}

},
renderDiv(){
console.log(‘渲染div’)
if(this.state.hide){

}else{

return ()
}

},
test(num1,num2,event){
console.log(‘点到我了’,num1,num2,event)
},
toggle(){
// this.state.color=!this.state.color
console.log(this.state.color)
this.setState({color:!this.state.color})
},
render(){
return (

hehe

hehe

{this.props.hehe}
{/* {this.state.show?

div

:

p

} /}
{/{ this.state.hide||

div

}*/}
{this.renderDiv()}

数据绑定

{this.state.num}

{this.state.string}

{this.state.null?‘a’:‘b’}

{this.state.undefined?‘c’:‘d’}

{this.state.boolean?‘真’:‘假’}

{this.state.obj.us}

{this.state.arr}

    

       {this.state.tabs.map((item,index)=>{
         return (
{item}
)
       })}
      
  
      
    {/*add*/}
       {
         console.log(11)
         this.test(1,2,e)
       }}>add  
       
    

      
       toggle 
      
    // this.setState({num:5},()=>{
        //   console.log('赋值结束',this.state.num)
        // })
        // console.log('bottom',this.state.num)
        setTimeout(()=>{
          this.setState({num:2})
          this.setState({num:3})
          this.setState({num:4})
          this.setState({num:5})
        },1000)
        
    
      {
         console.log(this.refs.hehe)
      }}> toggle  
      
    {
         console.log(this)
         this.refs.son.sonfun()
      }}> toggle
      
  
      
            你买到票了没
        
      
      {
        this.refs.son.toggle(1,2)
      }}>toggle
      
      
      {
        this.setState({show:!this.state.show})
      }}>toggle
      
      
      toggle(num1,num2){
console.log(num1,num2)
this.setState({show:!this.state.show})

},
render() {
return (

这里是父组件

{!this.state.show||

}

      toggle(){
this.setState({show:!this.state.show})

},
render() {
return (

这里是父组件

)

}
})

// 将组件挂载到 app元素上 参数1 要挂载的组件 参数2 要挂载的元素
// 组件名当成标签名使用 组件名必须大写
ReactDOM.render(,document.getElementById(‘app’))
// ReactDOM.render(,app)

1 https://blog.csdn.net/qq_36824244/article/details/103003640

用于构建用户界面的javascript库

16之前采用diff算法，之后采用fiber算法，分成小块，异步渲染

import React from “react”
//只要使用jsx的语法都需要引入react，这是顶级api
import ReactDOM from “react-dom”
//render是react dom提供的一个方法，这个方法通常只会渲染一次
import { render } from ‘react-dom’

const app=

Welconme

//函数式组件
//使用箭头函数，但名字要大写开始
const createApp = (props) => {
//在jsx里面写js语法需要加{}，只有这一种语法
return

Welconme{props.title}

}
const app = createApp({
title: ‘16.8’
})
//类组件
class App extends React.Component {
render () {
return

类组件!!!

}
}
//new一个实例
//类组件渲染的原理
// 因为app不是一个element所以必须要调实例的render方法
const app = new App({
desc:‘类组件是继承React.Component的1’
}).render()
//表示一个虚拟dom树
const appVDom = {
tag: ‘div’,
attrs: {
className: ‘app’,
id: ‘appRoot’
},
children: [
{
tag: ‘h3’,
attrs: {
className: ‘title’
},
children: [
‘类组件!!!’
]
},{
tag: ‘p’,
attrs: null,
children: [
‘类组件是继承React.Component的’
]
}
]
}
//所以react在真正渲染的时候会把上面的代码成下面这个样子，这是合法的js代码
class App extends Component {
render () {
return (
// React.createElement是一个方法，用于创建元素，可以有很多参数，但前两个是固定的
//第一个为标签名
//第二个为标签的属性
React.createElement(
‘div’,
{
className: ‘app’,
id: ‘appRoot’
}
),
React.createElement(
‘h3’,
{
className: ‘title’,
},
‘类组件’
),
React.createElement(
‘p’,
null,
‘类组件是继承React.Component的’
)
)
}
}
//下载class包 npm i classnames --save

ReactDOM.render(app,querySelector("#toot")

//在react6以前使用的是这种方式来创建一个类组件
React.createClass({
render

类组件!!!

})
2
https://blog.csdn.net/halations/article/details/84389261

3基础
https://blog.csdn.net/qq_30523685/article/details/85621598

React的注意事项
一般采用import的方式引入React，React首字母规定大些，因为jsx会默认使用大写的React

会根据尖括号(<)来判断是一个html，根据花括号({)来判断是一个js js中的保留字 关键字会进行转化 class=>className for=>htmlFor react相邻的jsx元素，react元素，必须被一个标签包裹 <> style标签 必须是一个对象 style={{}} //{}表示js里面的{}表示是一个对象 注释 要用{}包裹 dangerouslySetInnerHTML 危险的，解析html用innerHtml的方式把内容塞进元素中

你好"}}>

可以在页面中使用三元运算 事件方法 之前的οnclick=> onClick …

模拟的React 和 render
react渲染的流程

react会把jsx语法渲染成React.createElement()格式 React.createElement() 会转为 vnode(虚拟节点) vnode 渲染到页面上

let React = {
createElement(type,props,…children){//可以组成一个对象，用来描述dom元素
return {type,props,children}；//虚拟dom
}
}
let ele =

哈哈

;
console.log(ele);//返回一个对象
let render=(obj,container)=>{
if(typeof obj === “string”) return container.appenChild(document.createTextNode(obj));
let {type,props,children} = obj;
let ele = document.createElement(type);
for(let key in props){
ele.setAtteributte(key,props[key])
}
children.forEach(item=>{
render(item,ele);//递归，渲染子节点
})
children.appendChild(ele);
}
React组件
函数组件
函数就是组件 组件名称规定首字母大写,小写认为是一个标签元素 组件在元素中应用<组件名/> or <组件名> 组件传递的属性或方法(<组件名 title={“222”}>)会把传入的属性包成一个对象({title:“222”})传给这个组件函数props,在组件内取值时就是，{props.title}

函数组件会在内部添加一个render方法，把函数的返回结果作为render方法的返回结果
函数组件的不足

没有状态 新版本有增加 没有生命周期的钩子 新版本有增加 函数组件中没有this

类组件
类组件在渲染时会默认调用render方法 类组件内有状态和钩子函数 需要继承React.Component React.Component 是一个基类，有生命周期，更改状态的方法 继承React.Component 之后才算是一个React类。

import React from “react”;
import ReactDOM from “react-dom”;
class Clcok extends React.Component{
constructor(props){//会接受组件传入的属性or方法
super(props);
//this.state 是规定死的，表示给这个组件生命状态
this.state={ }
}
//es7语法 简单粗暴 和上面的一样
// state={}
render(){
return

哈哈

}
}
React 的数据源(props(外部传入，不可修改) ,state(内部自带，可修改))
props 会把组件传入的属性or方法放在this上 ---- 取值时：this.props.name1 this.state 状态 ---- 取值时：this.state.name1 this.setState

是父类提供的，用于修改状态,这种更新状态的方式，不会覆盖之前的，只会进行比较把更新的状态进行合并 this.setState 会刷新页面，如果不用this.setState。直接修改state 会改状态还是页面不会刷新 需要改属性的话只能把属性(props)变为状态(state) this.setState 可以执行多次么？ 面试题

React 生命周期(钩子函数)
componentDidMount(){} 当前组件挂在完成，在render方法加载完之后执行 unmountComponentAtNode() 卸载组件 //用法 ReactDOM.unmountComponentAtNode(window.root) componentWillUnmount(){} 将要卸载,在此阶段中删掉所有的监听和卸载异步方法 componentDidMount(){ this.itemer = setInterval=()=>{ //this.setState 可以导致页面刷新 this.setState({time:new Date().toLocalString()}) } } componetWillUnmount(){ clearInterval(this.timer); }

React Event 中的this问题
this问题

通常在元素中给事件绑定一个函数 (onClick = this.btnclick) this是undefined的 在es6 类中，如果把原型上的方法拿出来，这是一个错误的操作，this是undefined btnclick(){} 1 如果解决this指向问题

在元素中绑定时加入bind(onClick = this.btnclick.bind(this)) 每次点击都产生一个新的函数 在constructor中设置一下，然后在元素中用(οnclick={this.btnclick}) 官网推荐 consttuctor(){ super(); this.btnclick = this.btnclick.bind(this); //这样每次点击的时候都是用的一个函数。 }

采用箭头函数可以完美解决，只要是在原型中的方法采用箭头函数就可以 在元素中直接用(οnclick=this.btnclick) es7方式 btnclick=()=>{} //这里采用箭头函数方式

prop-types
React 内置了类型检测的功能，在组件中检测，可以赋值propTypes属性

格式校验 需下载 propTypes 属性 .array 数组 .bool 布尔值 .func 函数 .number 数字 .object 对象 .string 字符串 .symbol 符号 .node 任何东西都可以被渲染:numbers, strings, elements,或者是包含这些类型的数组(或者是片段)。 .element React元素 .instanceOf(Message) 类的一个实例 .oneOf([‘News’, ‘Photos’]) 枚举值 .oneOfType([PropTypes.string,PropTypes.number,PropTypes.instanceOf(Message)]) 多种类型其中之一 .arrayOf(PropTypes.number) 某种类型的数组 .objectOf(PropTypes.number) 某种类型的对象 .shape({color: PropTypes.string,fontSize: PropTypes.number}) 特定形式的对象 .func.isRequired 可以使用 isRequired’ 链接上述任何一个，以确保在没有提供 prop 的情况下显示警告 .any.isRequired 任何数据类型的值 function(props, propName, componentName) { return new Error()} 自定义的验证器 .arrayOf(function(propValue, key, componentName, location, propFullName) {} import React from ‘react’; import ReactDOM from ‘react-dom’; import PropTypes from ‘prop-types’; class Person extends React.Component{ static defaultProps = { name:‘Stranger’ } static propTypes={ name: PropTypes.string.isRequired, age: PropTypes.number.isRequired, gender: PropTypes.oneOf([‘male’,‘famale’]), hobby: PropTypes.array, postion: PropTypes.shape({ x: PropTypes.number, y:PropTypes.number }), age(props,propName,componentName) { let age=props[propName]; if (age <0 || age>120) { return new Error(Invalid Prop ${propName} supplied to ${componentName}`) } } } render() { let {name,age,gender,hobby,position}=this.props; return (
姓名 年龄 性别 爱好 位置
{name} {age} {gender} {hobby.join(’,’)} {position.x+’ '+position.y}
) } } let person={ age: 100, gender:‘male’, hobby: [‘basketball’,‘football’], position: {x: 10,y: 10}, } ReactDOM.render(, document.getElementById(‘root’));

受控与非受控组件
在表单中有受(状态)控组件和非受控组件

受控组件就是需要添加 onChange

受控好处：- 可以给输入框赋予默认值 - 实时校验

受控坏处：- 每次输入都会调用setState

非受控

非受控好处：- 简单，也不写状态

非受控坏处：- 不能实时校验

ref 相当于别名

ref设值or取值 import React,{Component} from “react”; import ReactDOM from “react-dom”; class Control extends Component{ password = React.createRef();//新版本 16.3采用的 handleClick=()=>{ //取值 console.log(this.username.value);// console.log(this.refs.aaa)// 废弃的 //this.password.current 才是真实的dom console.log(this.password.current.value); } render(){ return

{this.username = dom}} /> //新版本
} }
React 是单向数据流
方法1 Q：子辈不能修改父的值，那如果修改呢？ A：通过由父辈传递给子辈一个函数，函数回调里放的就是修改的功能，当子辈执行这个函数的时候就会触发父辈的回调就可以更改这个值在传入下去。

方法2 context Api React提供的，定义一些数据，由子孙直接消费，不必一层层下传

4 超详细讲解
https://blog.csdn.net/xuwei1215225/article/details/90180252

React高性能的体现：虚拟DOM
每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A-B,B-A，React会认为A变成B，然后又从B变成A UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。

React Fiber
的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。

编写第一个react应用程序
把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js.

函数组件
app({ name: ‘react’ }),

// React组件的调用方式 ,

es6 class组件其实就是一个构造器,每次使用组件都相当于在实例化组件，像这样：
import React from ‘react’
import ReactDOM from ‘react-dom’
class App extends React.Component {
render () {
return (

欢迎进入{this.props.name}的世界

)
}
}
const app = new App({
name: ‘react’
}).render()
ReactDOM.render(
app,
document.getElementById(‘root’)
)
在16以前的版本还支持这样创建组件, 但现在的项目基本上不用
React.createClass({ render () { return (

组件的组合、嵌套
将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖 组件嵌套的方式就是将子组件写入到父组件的模板中去，且react没有Vue中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系

React.createElement
会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等, 语法为

React.createElement(
type,
[props],
[…children]
)
JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render()—>DOM元素 —>插入页面 #组件中DOM样式

行内样式 想给虚拟dom添加行内样式，需要使用表达式传入样式对象的方式来实现： // 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号
Hello world

行内样式需要写入一个样式对象，而这个样式对象的位置可以放在很多地方，例如render函数里、组件原型上、外链js文件中

使用class React推荐我们使用行内样式，因为React觉得每一个组件都是一个独立的整体 其实我们大多数情况下还是大量的在为元素添加类名，但是需要注意的是，class需要写成className（因为毕竟是在写类js代码，会收到js规则的现在，而class是关键字）
Hello world

不同的条件添加不同的样式 有时候需要根据不同的条件添加不同的样式，比如：完成状态，完成是绿色，未完成是红色。那么这种情况下，我们推荐使用classnames这个包： css-in-js styled-components是针对React写的一套css-in-js框架，简单来讲就是在js中写css。npm链接 #TodoList

组件化开发React todolist， 项目开发中的组件的基本目录结构基本上是这样的：
/your-project

src
…
components
YourComponentOne
index.js/YourComponentOne.js
YourComponentTwo
index.js/YourComponentTwo.js
index.js 用于导出组件
注意：一个组件只干一件事情 ，所以TodoList和TodoItem要做成两个组件，这样也方便于后期理解shouldComponentUpdate
React的超详细讲解
原创 搞前端的正则妈 最后发布于2019-05-13 20:02:43 阅读数 248 收藏
发布于2019-05-13 20:02:43
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuwei1215225/article/details/90180252
展开

React React的重点

webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
其它相似打包工具还有rollup.js 、 parcel、FIS等
按照webpack的指南**(注意是指南不是概念不是api)**进行针对性的讲解即可，需要被充一下工程化的知识

工程化
这个部分的内容可以做为一些思想给学员讲解，不需要学员掌握。可以理解为扩展的内容

什么是JS项目工程化
版本控制
自动化持续继承、持续交付(CI/CD)
代码质量控制(QA)
工具
模块化
文档
demo
编译过程
自动化处理每次push, tag, release的任务队列

安装
安装 : npm命令行工具
安全审计：npm audit
Lint
格式检查: eslint/stylelint
格式化: prettier
测试
测试套装: jest / mocha / ava / kamar
代码覆盖量: nyc / codecov / coveralls
构建
转换器: babel / TS / flow
预处理器: sass / less / postcss
代码混淆: uglify-js / terser
打包及tree shaking: webpack / rollup / parcel
压缩(gzip等)
复制 / 删除 / 移动文件
检查打包文件的大小
移除无用的代码
push
交付: git
发布: npm
部署
服务器
Pages: git pages
云服务器: aliyun / qcloud / aws
Story Book
create-react-app
全局安装create-react-app

$ npm install -g create-react-app
1
创建一个项目

$ create-react-app your-app 注意命名方式
Creating a new React app in /dir/your-app.
Installing packages. This might take a couple of minutes. 安装过程较慢，可以推荐学员使用yarn
Installing react, react-dom, and react-scripts…
1
2
3
4
如果不想全局安装，可以直接使用npx

$ npx create-react-app your-app 也可以实现相同的效果
1
这需要等待一段时间，这个过程实际上会安装三个东西

react: react的顶级库
react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
react-scripts: 包含运行和打包react应用程序的所有脚本及配置
出现下面的界面，表示创建项目成功:
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd your-app
npm start
Happy hacking!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
根据上面的提示，通过cd your-app命令进入目录并运行npm start即可运行项目。
生成项目的目录结构如下：

├── README.md 使用方法的文档
├── node_modules 所有的依赖安装的目录
├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json
├── public 静态公共目录
└── src 开发用的源代码目录
1
2
3
4
5
6
常见问题：

npm安装失败
切换为npm镜像为淘宝镜像
使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内
如果还没有办法解决，请删除node_modules及package-lock.json然后重新执行npm install命令
再不能解决就删除node_modules及package-lock.json的同时清除npm缓存npm cache clean --force之后再执行npm install命令
关于React
React部分的内容包含了所有授课的思路

React的起源和发展
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React与传统MVC的关系
轻量级的视图层库！A JavaScript library for building user interfaces
React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

React高性能的体现：虚拟DOM
React高性能的原理：
在Web开发中我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。
React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A-B,B-A，React会认为A变成B，然后又从B变成A UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。
尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，部而对实际DOM进行操作的仅仅是Diff分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。

React Fiber:
在react 16之后发布的一种react 核心算法，React Fiber是对核心算法的一次重新实现(官网说法)。之前用的是diff算法。
在之前React中，更新过程是同步的，这可能会导致性能问题。
当React决定要加载或者更新组件树时，会做很多事，比如调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，中途不会中断。因为JavaScript单线程的特点，如果组件树很大的时候，每个同步任务耗时太长，就会出现卡顿。
React Fiber的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。

React的特点和优势
虚拟DOM
我们以前操作dom的方式是通过document.getElementById()的方式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进行操作
而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的高，和主流MVC框架有本质的区别，并不和dom打交道
组件系统
react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component
那么什么是组件呢？
组件指的就是同时包含了html、css、js、image元素的聚合体
使用react开发的核心就是将页面拆分成若干个组件，并且react一个组件中同时耦合了css、js、image，这种模式整个颠覆了过去的传统的方式
单向数据流
其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了
JSX 语法
在vue中，我们使用render函数来构建组件的dom结构性能较高，因为省去了查找和编译模板的过程，但是在render中利用createElement创建结构的时候代码可读性较低，较为复杂，此时可以利用jsx语法来在render中创建dom，解决这个问题，但是前提是需要使用工具来编译jsx
编写第一个react应用程序
react开发需要引入多个依赖文件：react.js、react-dom.js，分别又有开发版本和生产版本，create-react-app里已经帮我们把这些东西都安装好了。把通过CRA创建的工程目录下的src目录清空，然后在里面重新创建一个index.js. 写入以下代码:

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
import React from ‘react’
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
import ReactDOM from ‘react-dom’
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。

欢迎进入React的世界

, // 渲染到哪里 document.getElementById('root') ) 1 2 3 4 5 6 7 8 9 10 11 元素与组件 如果代码多了之后，不可能一直在render方法里写，所以就需要把里面的代码提出来，定义一个变量，像这样：

import React from ‘react’
import ReactDOM from ‘react-dom’
// 这里感觉又不习惯了？这是在用JSX定义一下react元素
const app =

欢迎进入React的世界

ReactDOM.render(
app,
document.getElementById(‘root’)
)
1
2
3
4
5
6
7
8
函数式组件
由于元素没有办法传递参数，所以我们就需要把之前定义的变量改为一个方法，让这个方法去return一个元素:

import React from ‘react’
import ReactDOM from ‘react-dom’
// 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需要加 {}，包括注释也是一样，并且可以多层嵌套
const app = (props) =>

欢迎进入{props.name}的世界

ReactDOM.render(
app({
name: ‘react’
}),
document.getElementById(‘root’)
)
1
2
3
4
5
6
7
8
9
10
这里我们定义的方法实际上也是react定义组件的第一种方式-定义函数式组件，这也是无状态组件。但是这种写法不符合react的jsx的风格，更好的方式是使用以下方式进行改造

import React from ‘react’
import ReactDOM from ‘react-dom’
const App = (props) =>

欢迎进入{props.name}的世界

ReactDOM.render(
// React组件的调用方式
,
document.getElementById(‘root’)
)
1
2
3
4
5
6
7
8
这样一个完整的函数式组件就定义好了。但要注意！注意！注意！组件名必须大写，否则报错。

class组件
ES6的加入让JavaScript直接支持使用class来定义一个类，react的第二种创建组件的方式就是使用的类的继承，ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码：

import React from ‘react’
import ReactDOM from ‘react-dom’
class App extends React.Component {
render () {
return (
// 注意这里得用this.props.name, 必须用this.props

欢迎进入{this.props.name}的世界

) } } ReactDOM.render( , document.getElementById('root') ) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 运行结果和之前完全一样，因为JS里没有真正的class，这个class只是一个语法糖, 但二者的运行机制底层运行机制不一样。

函数式组件是直接调用, 在前面的代码里已经有看到
es6 class组件其实就是一个构造器,每次使用组件都相当于在实例化组件，像这样：
import React from ‘react’
import ReactDOM from ‘react-dom’
class App extends React.Component {
render () {
return (

欢迎进入{this.props.name}的世界

)
}
}
const app = new App({
name: ‘react’
}).render()
ReactDOM.render(
app,
document.getElementById(‘root’)
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
更老的一种方法
在16以前的版本还支持这样创建组件, 但现在的项目基本上不用

React.createClass({
render () {
return (

{this.props.xxx}

) } }) 1 2 3 4 5 6 7 组件的组合、嵌套 将一个组件渲染到某一个节点里的时候，会将这个节点里原有内容覆盖 组件嵌套的方式就是将子组件写入到父组件的模板中去，且react没有Vue中的内容分发机制（slot），所以我们在一个组件的模板中只能看到父子关系

// 从 react 的包当中引入了 React 和 React.js 的组件父类 Component
// 还引入了一个React.js里的一种特殊的组件 Fragment
import React, { Component, Fragment } from ‘react’
import ReactDOM from ‘react-dom’
class Title extends Component {
render () {
return (

欢迎进入React的世界

) } } class Content extends Component { render () { return (

React.js是一个构建UI的库

) } } /** 由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom class App extends Component { render () { return (

) } } **/ // 如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹 class App extends Component { render () { return (