React总结
入门
特点
- Declarative(声明式编码)
- Component-Based(组件化编码)
- Learn Once, Write Anywhere(支持客户端与服务器渲染)
- 高效
高效原因
- 虚拟(virtual)DOM, 不总是直接操作DOM
- DOM Diff算法, 最小化页面重绘, 减少重排重绘的次数
使用
相关js库
- react.js: React的核心库
- react-dom.js: 提供操作DOM的react扩展库
- babel.min.js: 解析JSX语法代码转为纯JS语法代码的库
编码
//引入相关库
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel"> //必须声明babel
// 创建虚拟DOM元素
const vDom = <h1>Hello React</h1> // 千万不要加引号
// 渲染虚拟DOM到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
</script>虚拟Dom
- React提供了一些API来创建一种
特别的一般js对象
var element = React.createElement('h1', {id:'myTitle'},'hello')- 上面创建的就是一个简单的虚拟DOM对象
- 虚拟DOM对象最终都会被React转换为真实的DOM
- 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
- 创建虚拟Dom方法
<body>
<div id="test"></div>
</body>
<script type="text/babel">
// 创建虚拟DOM对象
const vDom1 = React.createElement('p',{id: 'myId1', className: 'myClass1'}, '珂朵莉',vDom3);
// 将虚拟DOM对象插入到页面的指定容器中,渲染虚拟DOM(元素)
ReactDOM.render(vDom1, document.getElementById('test1')); //方法一
//方法二
const id = 'myId2';
const content = '我永远喜欢珂朵莉';
const vDom3 = React.createElement('span', {}, 'daisiki');
const vDom2 = <div><h2 id={id } className="myClass2">{content}</h2>{vDom3}</div>
// 将虚拟DOM对象插入到页面的指定容器中
ReactDOM.render(vDom2, document.getElementById('test2'));
const list = ['1', '2', '3', '4'];
ReactDOM.render(
<ul>
{ list.map(( item,index) => <li key={index}>{item}</li> ) }
</ul>
,document.getElementById('test3'))
<script>JSX
1)全称: JavaScript XML
2)react定义的一种类似于XML的JS扩展语法: XML+JS
3)作用: 用来创建react虚拟DOM(元素)对象
a.var ele = <h1>Hello JSX!</h1>
b.注意1: 它不是字符串, 也不是HTML/XML标签
c.注意2: 它最终产生的就是一个JS对象
4)标签名任意: HTML标签或其它标签
5)标签属性任意: HTML标签属性或其它
6)基本语法规则
a.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
b.遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含, //待定：* if/for循环 不能用
7)babel.js的作用
a.浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
b.只要用了JSX，都要加上type="text/babel", 声明需要babel来处理React面向组件编程
自定义组件(Component) :
定义组件(2种方式)
/*方式1: 工厂函数组件(简单组件)*/
function MyComponent () {
return <h2>工厂函数组件(简单组件)</h2>
}
/*方式2: ES6类组件(复杂组件)*/
class MyComponent2 extends React.Component {
render () {
console.log(this) // MyComponent2的实例对象
return <h2>ES6类组件(复杂组件)</h2>
}
}渲染组件标签
ReactDOM.render(<MyComponent />, document.getElementById('example1'))注意
- 组件名必须首字母大写
- 虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签
- 单标签 <xx />: 当组件没有内容时，直接用单标签
- 双标签 <xx></xx> : 当组件有内容时，可以用双标签
render()渲染组件标签的基本流程
- React内部会创建组件实例对象
- 得到包含的虚拟DOM并解析为真实DOM
- 插入到指定的页面元素内部
React 的 三大属性
state
- state是组件对象最重要的属性, 值是对象(可以包含多个数据)
- 组件被称为”状态机”, 通过更新组件的state来更新对应的页面显示(重新渲染组件)
用法
初始化
- 在constructor中定义 this.state = {xxx: xxx},
- 不在constructor定义：state = {xxx: xxx}
- 读取 this.state.xxx
- 更新 this.setState({xxx: xxx})
注意
- setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
- 如果需要获取“异步”场景的 setState 的值 –> this.setState(partial, callback) 在callback中拿到最新的值
- 如果要在“异步”场景更新多次 setState –> this.setState((prevState, props) => {return newState})
props
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在props中
作用
- 通过标签属性从组件外向组件内传递变化的数据
- 注意: 组件内部不要修改props数据
使用
- 约束属性的类型和必要性 static propTypes = {xxx: PropTypes.func.isRequired}
- 定义属性的默认值 static defaultProps = {xxx: xxx}
- 内部读取某个属性值，获取组件外向组件内传递的标签属性 this.props.xxx / const { name, age, sex } = this.props;
- 扩展属性: 将对象的所有属性通过props传递，设置 <List name={xxx}> / <Person {…person}/>
- 默认属性值： 原来方案Person.defaultProps = {name: ‘Mary’} 最新方案：static defaultProps = {
name: ‘Mary’}
- 组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}区别一下组件的props和state属性
- state: 组件自身内部可变化的数据
- props: 从组件外部向组件内部传递数据, 组件内部只读不修改
refs
介绍
组件内的标签都可以定义ref属性来标识自己， 用来获取DOM元素
在组件中可以通过this.msgInput来得到对应的真实DOM元素
a. <input type="text" ref={this.createRef}/> (推荐使用)
b. <input type="text" ref={input => this.funcRef = input}/>
c. <input type="text" ref="stringRef" /> (即将废弃)
d. 回调函数在组件初始化渲染完或卸载时自动调用作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据
使用
1.<input type="text" ref={this.createRef}/>
2.<input type="text" ref={(input) => this.funcRef = input}/>
3.<input type="text" ref="stringRef"/>
constructor(props) {
super(props);
this.createRef = React.createRef();
}
// 获取input标签的值
1. this.createRef.current
2. console.log(this.funcRef);
3. console.log(this.refs.stringRef);事件处理
通过onXxx属性指定组件的事件处理函数(注意大小写)
- a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
- b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/> handleFocus(event) { event.target //返回input对象 }
强烈注意
- 1)组件内置的方法中的this为组件对象
2)在组件类中自定义的方法中this为undefined
- a. 强制绑定this: 通过函数对象的bind()
- b. 箭头函数(ES6模块化编码时才能使用)
React组件中函数this指向规则
- 组件内置的方法中的this为组件的实例对象
- 在组件类中自定义的方法中this为undefined
- 通过函数对象的bind()强制绑定this指向为组件实例对象，也就是this
- 箭头函数this就能指向实例对象(ES6模块化编码时才能使用)
- 工厂函数组件中this为undefined
- ES6类组件(复杂组件)this为组件的实例对象
表单的组件分类
- 受控组件: 表单项输入数据能自动收集成状态(onChange)
- 非受控组件: 需要时才手动读取表单输入框中的数据(onClick)
组件化编码流程和套路
组件编码流程：
1.拆分组件：根据页面功能拆分
APP
AddTodo
TodoList
2.实现静态组件
先实现大的组件（最外层的），再实现里面的组件
先有一个基本的显示效果
3.实现动态组件
1.需不需要定义状态数据？ 看页面是否有变化，有变化就要定义状态数据
2.状态数据定义在哪里？ APP
如果数据是单个组件需要，就定义在单个组件中
如果数据是多个组件需要，就定义在公共的父组件中，也就是引用了那几个多组件的父组件
3.状态数据定义为什么？
定义成对象、数组、基本数据类型。
方便插入数据和遍历展示，所以用数组
4.子组件如何操作父组件的数据
父组件定义操作数据的方法（数据再哪，操作数据的方法就在在哪）
父组件将操作数据的方法传给子组件，子组件调用就能修改父组件的数据
组件的生命周期函数
理解
- 组件对象从创建到死亡它会经历特定的生命周期阶段
- React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
- 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作
生命周期详述
组件的三个生命周期状态:
- Mount：插入真实 DOM，渲染时
- Update：被重新渲染，更新时
- Unmount：被移出真实 DO，,卸载时
React 为每个状态都提供了勾子(hook)函数
- componentWillMount()
- componentDidMount()
- componentWillUpdate()
- componentDidUpdate()
- componentWillUnmount()
生命周期流程:
第一次初始化渲染显示: ReactDOM.render()
- constructor(): 创建对象初始化state
- componentWillMount() : 将要插入回调
- render() : 用于插入虚拟DOM回调
- componentDidMount() : 已经插入回调
每次更新state: this.setSate()
- componentWillUpdate() : 将要更新回调
- render() : 更新(重新渲染)
- componentDidUpdate() : 已经更新回调
移除组件: ReactDOM.unmountComponentAtNode(containerDom)
- componentWillUnmount() : 组件将要被移除回调
生命周期函数作用:
constructor()`
* 初始化state
* 修改函数的this指向
* 只会执行一次
static getDerivedStateFromProps(nextProps, prevState)`
* 一般不用
* 使组件能够根据props的更改来更新其内部状态
render()`
* 渲染组件
componentDidMount()`
* 发送ajax请求
* 执行异步任务
* 只会执行一次
shouldComponentUpdate(nextProps, nextState)`
* react性能优化，减少不必要的render
getSnapshotBeforeUpdate(prevProps, prevState)`
* 一般不用
* 可以在渲染之前得到DOM对象从而获取一些信息
componentDidUpdate(prevProps, prevState, snapshot)`
* 更新组件完成时对DOM进行操作
* 发送ajax请求（注意不要陷入死循环）
componentWillUnmount()`
* 清除定时器，收尾工作等
重要的生命周期(必须掌握)
- constructor()
- render() 初始化渲染或更新渲染调用
- componentDidMount() 开启监听, 发送ajax请求
- componentWillUnmount() 做一些收尾工作, 如: 清理定时器
- componentDidUpdate() 可以获取更新后DOM元素，从而进行操作
- shouldComponentUpdate 专门用来做React性能优化的：将之前的状态/属性和当前的状态/属性进行对比，如果一样，就不更新，如果不一样就更新
返回值为true就更新
返回值为false就不更新
React脚手架
介绍
xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
- a. 包含了所有需要的配置
- b. 指定好了所有的依赖
- c. 可以直接安装/编译/运行一个简单效果
- react提供了一个用于创建react项目的脚手架库: create-react-app
- 项目的整体技术架构为: react + webpack + es6 + eslint + babel
- 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
创建项目并启动
npm install -g create-react-app //全局安装create-react-app
create-react-app hello-react //创建一个项目名称为hello-react的脚手架
npm start //必须在hello-react文件目录下运行
react脚手架项目结构
ReactNews
|--node_modules---第三方依赖模块文件夹
|--public
|-- index.html-----------------主页面
|--src------------源码文件夹
|--components-----------------react组件
|--index.js-------------------应用入口js
|--.gitignore------git版本管制忽略的配置
|--package.json----应用包配置文件
|--README.md-------应用描述说明的readme文件
react ajax
前置说明
- React本身只关注于界面, 并不包含发送ajax请求的代码
- 前端应用需要通过ajax请求与后台进行交互(json数据)
- react应用中需要集成第三方ajax库(或自己封装)
常用的ajax请求库
- jQuery: 比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用
- a. 封装XmlHttpRequest对象的ajax
- b. promise风格
- c. 可以用在浏览器端和node服务器端
fetch: 原生函数, 但老版本浏览器不支持
- a.不再使用XmlHttpRequest对象提交ajax请求
- b.为了兼容低版本的浏览器, 可以引入兼容库fetch.js
- https://github.github.io/fetch/
- https://segmentfault.com/a/11…
componentDidMount(){
//发送Ajax请求
/* axios.get('https://api.github.com/search/repositories?q=r&sort=stars')
//axios.get('/user', {params: {q:r,sort:stars}})
//axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'})
.then(response => {
const {name, html_url} = response.data.items[0];
this.setState({ name,url: html_url})
})
.catch(err =>{
console.log(err);
})*/
fetch('https://api.github.com/search/repositories?q=v&sort=stars')
//get: fetch(url) post: fetch(url, {method: "POST" body:JSON.stringify(data),})
.then(res => res.json())
.then(response =>{
console.log(response);
const {name, html_url} = response.items[0];
this.setState({name,url: html_url })
})
.catch(err =>{
console.log(err);
})
}react路由
相关理解
react-router的理解
- react的一个插件库
- 专门用来实现一个SPA应用
- 基于react的项目基本都会用到此库
SPA的理解
- 单页Web应用（single page web application，SPA）
- 整个应用只有一个完整的页面
- 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
- 当点击路由链接时, 只会做页面的局部更新，网址也会对应的改变
- 数据都需要通过ajax请求获取, 并在前端异步展现
路由的理解
什么是路由?
- 一个路由就是一个映射关系(key:value)
- key为路由路径, value可能是function/component
路由分类
后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
- a. 注册路由: router.get(path, function(req, res))
- b. 当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前台路由: 浏览器端路由, value是component（组件）, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件
- a.注册路由: <Route path=”/about” component={About} />
- b.当浏览器的hash变为#about时, 当前路由组件就会变为About组件
区别：
* 前端路由
* 不需要发送请求
* 不会刷新整个页面，局部更新
* 会修改url地址和浏览器历史记录
* value是component
* 后端路由
* 会发送请求
* 会刷新整个页面
* 会修改url地址和浏览器历史记录
* value是callback使用前端路由的作用：
- 用来开发SPA（单页面应用）
- 整个应用一个完整页面
- 不需要发送请求
- 不会刷新整个页面，局部更新
- 会修改url地址和浏览器历史记录
前端路由的实现
history库
a. 网址: https://github.com/ReactTraining/history
b. 管理浏览器会话历史(history)的工具库
c. 包装的是原生BOM中window.history和window.location.hashhistory API
a. History.createBrowserHistory(): 得到封装window.history的管理对象
b. History.createHashHistory(): 得到封装window.location.hash的管理对象
c. history.push(): 添加一个新的历史记录
d. history.replace(): 用一个新的历史记录替换当前的记录
e. history.goBack(): 回退到上一个历史记录
f. history.goForword(): 前进到下一个历史记录
g. history.listen(function(location){}): 监视历史记录的变化
react-router相关API
组件
1) <BrowserRouter>
browserHistory 是使用 React-Router 的应用推荐的 history方案。
它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/list/123这样真实的 URL
<BrowserRouter><App /></BrowserRouter>
2) <HashRouter>
3) <Route>
<Route path="/about" component={About}/>
<Route path="/home/message/:id" component={MessageDetail}/>
一旦url变为path对应的值，就加载component中的组件进行显示
4) <Redirect>
<Redirect to="/about"/>
什么路径都匹配，一旦匹配上就跳转到指定网址,与Switch配合使用
5) <Link>
只修改url的地址，不会发送请求
<Link to="/home">珂朵莉</Link>
6) <NavLink>
只修改url的地址，不会发送请求，并且多了一个class:active
export default function MyNavLink(props) {
return <NavLink {...props} activeClassName='activeClass'/>
}
<MyNavLink to="/about">About</MyNavLink>
7) <Switch>
切换显示（针对内部组件 - 子组件） --> 从上到下匹配，一旦有一个匹配上，其他就不看了
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Redirect to="/about"/>
</Switch>路由组件：通过Route组件加载的组件（import { withRouter } from ‘react-router-dom’）
- history 修改浏览器历史记录
- location 获取请求path
- match 获取params参数
- withRouter 作用：给非路由组件传递路由组件三个属性（history、location、match）@withRouter
