这是一篇关于React的全面教程，涵盖了React的基本概念、环境搭建、组件化开发、状态管理和事件处理等方面，深入讲解了JSX语法、ReactDOM.render()函数、组件生命周期及其钩子函数，还涉及到React与Redux、MobX的整合使用，以及如何利用脚手架创建项目，最后探讨了React与TypeScript的结合应用和umi框架的使用。
React
一、React的简介
1、介绍
-
React 是一个用于构建用户界面的 JAVASCRIPT 库。
-
React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
-
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
-
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它
2、特点
1）.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
2）. 灵活 −React可以与已知的库或框架很好地配合。
3）. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
4）. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
3、框架对比
与其他框架的共同点是，都采用虚拟dom，和数据驱动
| angularJs | reactJs | vueJs | |
|---|---|---|---|
| 控制器 | √ | - | - |
| 过滤器 | √ | - | √ |
| 指令 | √ | - | √ |
| 模板语法 | √ | - | √ |
| 服务 | √ | - | - |
| 组件 | - | √ | √ |
| jsx | - | √ | 2.0之后加入 |
二、环境搭建
1、引入文件的方式
1、React.js：
React的核心库，解析组件,识别jsx
https://cdn.staticfile.org/react/16.4.0/umd/react.development.js
2、reactDom.js：
处理有dom相关的操作
https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js
3、Babel.js
Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平
https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js
2、官方脚手架(模块化)
yarn global add create-react-app | npm install create-react-app -g
创建 react项目
create-react-app 目录 | npx create-react-app 目录 | npm init react-app 目录
yarn eject 解构出所有的配置文件 可选
yarn start | npm start 开发
yarn build | npm run build 打包
//调试 需要安装给chrome浏览器一个插件 react-dev-tools
环境解析
- react: 核心包，解析组件,识别jsx
- react-dom: 编译 -> 浏览器
- react-scrpts: react的项目环境配置
- manifest.json 生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字的显示内容
- registerServiceWorker.js支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
- 对Internet Explorer 9,10和11的支持需要polyfill。
第三方脚手架
yeomen/dva/umi
第一个React程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>, //JavaScript中竟然可以写HTML代码，这就是JSX
document.getElementById('box')
);
/*
也可以这样写：
const h = <h1>Hello, world!</h1>;
ReactDOM.render(
h,
document.getElementById('box')
);
*/
</script>
注意：script标签的type取值为：text/babel
总结：一个react的程序，就是把JSX通过ReactDOM.render()函数渲染到网页上。
另外，React的代码也可以单独写在一个文件里，扩展名为js，或者jsx。引入时，记住type=“text/babel”
JSX
1、JSX的介绍
什么是JSX：JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，只要你把HTML代码写在JS里，那就是JSX。
在实际开发中，JSX 在产品****打包阶段****都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。官方定义是：类 XML 语法的 ECMAScript 扩展。
JSX的进一步理解（为什么要搞个JSX）：
任何软件项目都有界面和逻辑，而传统的C/S开发里，一门语言完成了界面和数据，但是在BS（web）开发里，要完成界面和数据，需要三门语言：HTML，CSS，JS，而JSX完美的解决了这个问题，在JSX中把原生的JS，HTML都包含了。
2、特点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
3、JSX的语法
JSX就是把html代码写在javascript中，那么，写在javascript中有啥要求（与原来在html中的区别），这就是jsx语法要说的内容。
示例：
var msg=“哥们！”
const element =
Hello, world!{msg}
没有双引号，不是字符串const List = () => (
- list item
-
- list item
-
- list item
-
);
XML基本语法
-
只能有一个根标签，养成外面加上圆括号的习惯。
-
标签要闭合（单边标签得有斜杠）
元素类型
-
小写首字母对应 HTML的标签，组件名首字母大写。
-
注释使用 / * 内容 * / html标签内注释｛/ 最外层有花括号*/｝
元素属性
-
内联样式的style：样式名以驼峰命名法表示, 如font-size需写成fontSize。默认像素单位是 px（px不用写）
let _style = { backgroundColor:"red" }; ReactDOM.render( <h1 style={_style}>Hello, world!</h1>, document.getElementById('box') ); -
外部样式的class：HTML中曾经的 class 属性改为 className（因为class是js的关键字），外部样式时使用
ReactDOM.render( <h1 className="bluebg">Hello, world!</h1>, document.getElementById('box') ); -
for 属性改为 htmlFor（因为for是js的关键字）。（for属性在html标签中是扩充单选框|复选框的选择范围）
-
事件名用驼峰命名法。HTML是全小写（onclick），JSX中是驼峰(onClick)
javascript表达式
-
使用单花括号。
react里没有vue中的指令，任何地方需要javascript的表达式，只需要套上 单花括号就行。
const element = <h1>Hello, {120+130}!</h1> const element = <h1>Hello, {getName("张三疯")}!</h1> <input type="text" value={val ? val : ""} />注意：单花括号里只能写表达式，不能写语句（如：if，for）
总结：
对比vue，JSX相当于把vue组件里的template和javascript代码混写在一起，而vue中有很多的指令，react中只需要使用单花括号就行。
ReactDOM.render()函数
ReactDOM.render 是 React 的最基本方法。用于将JSX写的模板（经过模板渲染（把javascript的结果替换单花括号里的内容））转为 HTML 语言，并渲染到指定的HTML标签里。
ReactDOM.render( JSX写的html模板，dom对象);
总结：一个react的程序，就是把JSX通过ReactDOM.render()函数渲染到网页上。
程序员完成的是JSX的编写。
条件渲染
var sex='女'; if(sex=='男'){ var sexJSX=<p>我是男的</p>; }else{ var sexJSX=<p>我是女的</p>; } ReactDOM.render( <ul> {sexJSX} </ul>, document.getElementById('box') );注意：if语句不要写在单花括号里。
列表渲染
1）、渲染数组：
//数组里存放jsx var arr=[ <li>张三疯</li>, <li>张四疯</li>, <li>张五疯</li> ] const show = ()=> ( <ul>{arr}</ul> ) ReactDOM.render(show(),document.getElementById("box"));2）使用Javascript的map（）或者普通for循环进行列表的渲染
//普通for循环 let arr = ["铅笔","油笔","钢笔","毛笔"]; var arr2 =[]; for(let i in arr){ arr2.push(<li>{arr[i]}</li>); } const show = ()=> ( <ul>{arr2}</ul> ) ReactDOM.render(show(),document.getElementById("box")); //map const goods = ['铅笔','钢笔']; const goodsJSX = goods.map(function(val,index){ return <li>{val}</li> }); ReactDOM.render( //以下相当于react里的模板，不能出现js的语句，可以有表达式 <ul> {goodsJSX} </ul>, document.getElementById('box') );组件
react中定义组件有三种写法：函数方式，ES5的写法，ES6（类）的写法
函数方式的组件
函数的返回值是JSX就行。即就是：如果一个函数的返回值是JSX，那么就可以当标签的方式使用。
// 定义组件，组件名首字母大写（大驼峰） function MyCom(){ const msg="hello"; return ( <ul> <li>{msg}:三国演义</li> <li>{msg}:红楼梦</li> </ul> ) } ReactDOM.render( <MyCom/>, //使用组件 document.getElementById('box') );ES5的写法：
React.CreateClass()函数（React16后，已经被废弃了）
var MyCom = React.createClass({ render:function(){ //vue中也有render函数，是完成模板的代码 return ( <div> <h1>Hello, world!</h1> </div> ); } });ES6类的写法：
定义一个类，继承自 React.Component，在该类里，必须有个render()函数，render函数返回一个JSX代码。
换句话说：一个普通的ES6的类，只要有一个render()函数，并且render()函数返回一个JSX，那么就是组件。
// 定义组件 class MyCom extends React.Component{ constructor(props){ //props：是外部传入的数据，相当于vue中的props super(props); // state是内部的数据，相当于vue中的date this.state={ name:"田哥" } } render(){ const msg="hello"; return ( <ul> <li>{this.state.name}:三国演义</li> <li>{msg}:红楼梦</li> </ul> ) } }多个组件
// 标题 function MyTitle(){ return ( <h1>商品列表</h1> ) } // 详情 function MyDetail(){ return ( <ul> <li>铅笔</li> <li>钢笔</li> </ul> ) } ReactDOM.render( <div> <MyTitle/> <hr/> <MyDetail/> </div>, document.getElementById('box') );props
props 是组件对外的接口。接收外部传入的数据。是组件的属性（等同于html标签的属性）。
注意：Props对于使用它的组件内部来说，是只读的。一旦赋值不能修改。外部传值：
<组件名 属性名1=值1 属性名2=值2 .. />属性值=“静态值”
属性值={js数据}
组件内部使用：
1）、函数组件：
{props.属性名}function MyPerson(props){ return ( <div> <p>{props.name}</p> <p>{props.sex}</p> </div> ) } ReactDOM.render( <MyPerson name="张三疯" sex="男"/>, document.getElementById('box') );2）、类组件：
{this.props.属性名}class MyPerson extends React.Component{ render(){ return ( <div> <p>{this.props.name}</p> <p>{this.props.sex}</p> </div> ) } } ReactDOM.render( <MyPerson name="张三疯" sex="男"/>, document.getElementById('box') );**补充：**如果传递数据多的话，可以使用对象，但是必须使用扩展运算符（…）
扩展运算符： https://blog.csdn.net/jiang7701037/article/details/103192777
class MyPerson extends React.Component{ // constructor(props){ // super(props); // } render(){ return ( <div> <p>{ this.props.name}</p> <p>{ this.props.sex}</p> </div> ) } } let person={ name:"张三疯", sex:"男" } ReactDOM.render( <MyPerson { ...person}/>, document.getElementById('box') );props的默认值
1）、用 ||
function MyPerson(props){ let sex1 = props.sex || "女"; return ( <div> <p>性别：{sex1}</p> </div> ) } ReactDOM.render( <MyPerson />, document.getElementById('box') );2）、defaultProps
格式： //1）、函数式组件和类组件都可以： 组件名.defaultProps={ 属性名: 默认值 } //2)、若为类组件，可以在类的内部使用static修饰。 static defaultProps={ 属性名: 默认值 }示例： function MyPerson(props){ let sex1 = props.sex || "女"; return ( <div> <p>姓名：{props.name}</p> <p>性别：{sex1}</p> </div> ) } MyPerson.defaultProps={ name:"无名氏" } ReactDOM.render( <MyPerson />, document.getElementById('box') );类型检查：
注意：react15.5后，React.propTypes已经移入到另外一个库里，请使用prop-types。
https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js
//类型约定: 组件名.propTypes={ 属性名:PropTypes.类型名 } //必传参数 propName: PropsTypes.类型名.isRequired类型名的可以取值为：
PropTypes.array,
PropTypes.bool,
PropTypes.func,
PropTypes.number,
PropTypes.object,
PropTypes.string,
PropTypes.symbol,如：
function MyPerson(props){ return ( <div> <p>年龄：{props.age}</p> </div> ) } MyPerson.propTypes={ //注意大小写 age:PropTypes.number.isRequired } ReactDOM.render( <MyPerson age={12} />, document.getElementById('box') );state状态机
state 是状态，状态就是数据，state表示组件的内部数据。而props是外部传入组件的数据
定义并初始值
class App extends React.Component { constructor(props){ super(props); this.state={ //设置状态的初始值 属性名:属性值 } } }读取状态
this.state.属性名修改状态
必须调用setState()函数，不要直接赋值，而且，setState()函数是异步的。
1、修改状态时，必须要调用setState。因为，只要调用了setState函数，那就会调用了render()。如果直接赋值，不会把数据响应式地渲染到DOM上。（即：没有调render()函数）
class Book extends React.Component{ constructor(props){ super(props); this.state = { copyright:"版权归2011" } // 千万不能这么干，因为，数据修改后，不会响应式的呈现页面上（不会再次渲染DOM） // this.copyright="版权归2011"; // 下面这句话，可以先不管 this.changeVal = this.changeVal.bind(this); } changeVal(){ // this.copyright = "哈哈哈"; // console.log("this.copyright ",this.copyright); // 这不行，这个不会把数据响应式地渲染到DOM上。（即：没有调render()函数） // this.state.copyright = "哈哈哈"; // 这 行，因为，只要调用了setState函数，那就会调用了render(); this.setState({ copyright:"哈哈哈" }); } render=()=>{ console.log("render"); return ( <ul> <li>书名：{this.props.name}</li> <li>书龄：{this.props.age}</li> <li>{this.state.copyright}</li> <li>{this.copyright}</li> <input type="button" value="修改" onClick={this.changeVal} /> </ul> ) } } Book.propTypes = { "name":PropTypes.string.isRequired, "age":PropTypes.number } const jsx = <div><Book name="西游记" age={15} /></div> ReactDOM.render(jsx,document.getElementById("box"));2、setState()函数时异步的
//浅合并state this.setState({ 属性名:属性值 }) //改变状态前想做一些事情： this.setState((prevState,prevProps)=>{ //一般是用于在setState之前做一些操作,this.state==prevState==修改之前的state return { sname:value } }) //改变状态后想做一些事情： this.setState({ 属性名:属性值 }, () => { //一般是用于在setState之后做一些操作 //this.state == 修改之后的state }) //改变状态前后都想做一些事情： this.setState((prevState)=>{ // prevState:是旧值 console.log("prevState",prevState) return { age:15 } },()=>{ // this.state:就是新值。 console.log(this.state.age); });注意：
1、 直接修改state属性的值不会重新渲染组件 ，如：this.state.msg=“hello”;
补充：
给引用类型的某个属性赋值
示例代码：
1）、基本示例：
class MyPerson extends React.Component{ constructor(props){ super(props); this.state={ age:12 } this.changeAge = this.changeAge.bind(this); } changeAge(){ this.setState({ age:this.state.age+1 }); } render(){ return ( <div> <input type="button" value="修改年龄" onClick={this.changeAge} /> <p>年龄：{this.state.age}</p> </div> ); } }2）、setState是异步的示例：
class MyPerson extends React.Component{ constructor(props){ super(props); this.state={ age:12, isAdult:"未成年" } this.changeAge = this.changeAge.bind(this); } /* 这种写法达不到效果： changeAge(){ this.setState({ age:this.state.age+1 }); // setState是异步的,所以，以下的打印不是最新的值 console.log(this.state.age); // setState是异步的,所以，以下的判断达不到效果 if(this.state.age>=18){ this.setState({ isAdult:"已成年" }); } } */ changeAge(){ this.setState({ age:this.state.age+1 },()=>{ console.log(this.state.age); if(this.state.age>=18){ this.setState({ isAdult:"已成年" }); } }); } render(){ return ( <div> <input type="button" value="修改年龄" onClick={this.changeAge} /> <p>年龄：{this.state.age}</p> <p>年龄：{this.state.isAdult}</p> </div> ); } }无状态组件
无状态组件就是组件内部没有（不需要）state，无状态组件也可以理解为展示组件，仅做展示用，可以根据外部传来的props来渲染模板的内容，内部没有数据。相当于木偶（没脑子）。你说显示啥，咱就显示啥。
var MyFooter = (props) => ( <div>{props.xxx}</div> );仅仅只是一个函数，就ok了。
有状态组件
有状态组件就是不但外部可以传入，内部也有state。
有状态组件也可以理解为容器组件，用来容纳展示组件，在容器组件里处理数据的逻辑，把结果在展示组件里呈现。
创建有状态组件如下：
class Home extends React.Component { //容器组件 constructor(props) { super(props); this.state={ Hots:[], Goodslist:[] } } getHots(){ 发送axios请求获取数据 } getGoodsList(){ 发送axios请求获取数据 } render() { return ( <div> <Hot hots={this.state.Hots} ></Hot> //展示组件 <Goodslist goodslist={this.state.Goodslist} ></Goodslist >//展示组件 </div> ) } }注意：
做项目时，经常会把有状态组件和无状态组件进行结合使用。
1）、 有状态组件：处理数据的业务逻辑，包括和后端进行交互，获取数据。把数据传给无状态组件（一般会使用类组件）
2）、 无状态组件：只做展示用，没有自己的数据，会接收有状态组件传来的数据。（一般会使用函数式组件）
事件处理
React事件的特点：
1、React 事件绑定属性的命名采用驼峰式写法，而不是小写。如：onClick。
2、如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
3、在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为， 你必须明确的使用 preventDefault。
4、事件处理函数里的this是undefined（啊………），如果希望事件处理函数里的this是React组件对象本身，则需要用bind。
事件语法
1、格式
<JSX元素 onClick={this.实例方法|函数体} />
示例：
class Home extends React.Component{ fn01() { console.log("fn01"); } render(){ return ( <div> <input type="button" value="测试01" onClick={ this.fn01} /> <input type="button" value="测试02" onClick={ ()=>{ console.log("事件绑定箭头函数");}} /> </div> ) } }2、事件处理函数里的this
事件处理函数里的this是undefined，如何让事件处理函数里的this是React组件对象本身
1）、构造器：this.方法=this.方法.bind(this) 2）、在事件绑定时写，onClick={this.方法.bind(this)} 3）、事件绑定时，使用箭头函数：onClick={()=>this.方法()} 4）、定义方法时，直接使用箭头函数: 方法=()=>{箭头函数定义方法}如：
class MyPerson extends React.Component{ constructor(props){ super(props); this.state={ age:12, isAdult:"未成年" } this.changeAge = this.changeAge.bind(this); } changeAge(){ ……………………………… } //直接使用箭头函数 changeAge=()=>{ this指向会找上一级 } render(){ return ( <div> <input type="button" value="修改年龄" onClick={this.changeAge} /> <input type="button" value="修改年龄" onClick={()=>{this.changeAge()}} /> <input type="button" value="修改年龄" onClick={this.changeAge} /> <p>年龄：{this.state.age}</p> <p>年龄：{this.state.isAdult}</p> </div> ); } }3、事件对象
event对象是经过react处理过的。
如何获取事件对象------直接声明即可。
实例方法(ev) ev 代理事件对象 ，ev.target 返回虚拟Vdom
事件对象的获取：
1）、直接声明（没有其它参数的情况下）
changeAge1=(ev)=>{ console.log(ev); console.log(ev.target); } <input type="button" value="修改年龄2" onClick={this.changeAge1} />2）、箭头函数里直接声明（有其它参数的情况下）
changeAge2(ev,num){ console.log(ev); console.log(ev.target); console.log(num); } //注意：给onClick绑定的函数，还是只有一个参数，这个参数就是事件对象，此处在绑定的函数里再调用另外一个函数进行传参 <input type="button" value="修改年龄2" onClick={(ev)=>this.changeAge2(ev,2)} />注意：给事件属性绑定的函数，永远只会有一个参数，该参数就是事件对象。
4、阻止浏览器的默认行为：
只能用preventDefault，不能在事件函数里使用return false
refs
需要抓取dom元素与第三方 DOM 库集成，触发命令式动画，管理焦点，文本选择或媒体播放
表示对组件真正实例（也就是html标签，也就是DOM对象）的引用，其实就是ReactDOM.render()返回的组件实例；ref可以写在html标签里，也可以写在组件（自定义标签里），和vue的ref是同样的意思。
官方建议： 勿过度使用 Refs（尽量不要操作DOM），在对逻辑进行处理的时候尽量优先考虑state（数据驱动）。
用法
1）. 赋值为 字符串(官方不推荐使用)
<input type="text" ref="username" /> this.refs.username.value2）. 赋值为 回调函数
当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。
ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前
-
最低0.47元/天 解锁文章
扫一扫
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
