React

react概述：

概念：是一个将数据渲染为html视图的开源JavaScript库

特点：

• 1.采用组件化模式，声明式编码，提高开发效率即组件复用
• 2.在react native中是可以使用react语法进行移动端开发
• 使用虚拟dom+优秀的diffing算法，尽量减少与真实dom的交互

虚拟dom本质还是object类型的对象（一般对象），虚拟dom比较轻真实dom重，因为虚拟dom是react内部在用，无需真实dom上那么多的属性，虚拟dom最终会被react转化为dom呈现在页面上

jsx语法规则：

1. 定义虚拟dom时，不要写引号
2. 标签中混入js表达式要用{}
3. 样式的类名指定不要用class要用className
4. 内联样式要用style={{key:value}}的形式去写
5. 虚拟dom只有一个根标签
6. 标签必须闭合
7. 标签首字母：1.小写字母开头则将该标签转为html同名元素，没有该标签则控制台报错 2.若大写字母开头，react去渲染响应组件，如果组件没有定义则报错

组件：

1.函数式组件：(React解析组件标签，中找到可组件，发现组件是使用函数定义的随后调用该函数，将返回的虚拟dom转为真实dom，呈现在页面中)

2.类式组件：

虚拟dom：1.本质上object类型的对象（一般对象），2.虚拟dom比较轻，真是dom比较重，因为虚拟dom是react内部使用无需真实dom上那么多得属性 3.虚拟dom会被react转化为真实dom呈现在页面上

组件三大属性：

• state组件被称为“状态机”，通过更新组件的state来更新组件的state来更新对应页面的显示（重新渲染组件）
• props：每个组件对象都会有props属性，组件标签的所有属性都保存在props中 作用：通过标签属性从组件外向组件内传递变化的数据 注意：组件内部不要修改props数据
• refs与事件处理：组件内的标签都可以定义ref属性内标识自己 2.在组件中可以通过this.msginput来得到对应的真实DOM元素 3.作用：通过ref获取组件内容特定标签对象，进行读取其相关数据 事件处理：通过onxxx属性来指定组件的事件处理函数（react使用的是自定义合成事件，而不是使用的原生DOM事件 react中的事件是通过事件委托方式来处理的（委托给组件最外层的元素） 2.通过event.target得到发生事件的Dom元素对象 注意：事件内置的方法中的this为组件的对象 2.在组件中自定义的方法中this为null a.强制绑定this：通过函数对象的bing() b.箭头函数（es6）

事件处理：
1.通过onXXX属性制定组件的事件处理函数（a.react使用的是自定义事件而不是使用的原生dom事件，b.react中的事件是通过事件委托方式处理的（委托给组件最外层的元素），通过event.target得到事件的DOM元素对象 注意：组件内置的方法中的this为组件对象，在组件中自定义的方法中this为null。1.强制绑定this：通过函数对象的bind()，2.箭头函数）

函数柯里化：通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式

生命周期

1. 组件对象从创建到死亡会经历特定的生命周期阶段
2. react组件对象包含一系列的钩子函数（生命周期回调函数）在生命周期特定时刻回调
3. 定义组件时，可以重写特定的生命周期回调函数做特定的工作

重要的钩子：

1. render(): 初始化渲染或更新渲染调用
2. componentDidMount(): 开启监听, 发送 ajax 请求
3. componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
4. componentWillReceiveProps(): 后面需要时讲

react ajax

说明：react本身只关注于界面，并不包含发送ajax请求的代码，前端应用需要通过ajax请求与后台进行交互，react应用中需要集成第三方库ajax或自己封装

在进行服务器之间的交互时会发生跨域问题，使用代理服务器消除影响

中间件通信：

通过props传递：

1. 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
2. 通过 props 可以传递一般数据和函数数据, 只能一层一层传递
3. 一般数据–>父组件传递数据给子组件–>子组件读取数据
4. 函数数据–>子组件传递数据给父组件–>子组件调用函数

使用消息订阅(subscribe)-发布(publish)机制
PubSubJS库实现了兄弟组件间的消息订阅与分布

react路由：

SPA的理解：
1.单页web应用（single page application ,SPA）
2.整个应用只有一个完整的页面
3.点击页面中的链接不会刷新页面，只会做页面的局部更新 4.司机开都需要通过ajax请求获取并在前端异步展现

路由分类：

前端路由：
浏览器端路由value时component用于展示页面的内容 注册路由：<Route path="/test " component={}> 工作过程：当浏览器的path变为/test时当前路由组件会变为test组件
后端路由：
理解：value时function用来处理客户端提交的请求 注册路由：router.get(p-path，function(req,res)) 工作过程：当node接受到一个请求时根据请求路径找到匹配的路由调用路由中的函数来处理请求返回响应数据
路由组件与一般组件的区别：
1.写法组件
2.存放位置不同，
3.接受到的props不同 一般组件(组件标签时传递了什么就能收到什么)路由组件（接受到三个固定的组件history，localtion， match）
NavLink与封装NavLink：
1.navlink可以实现路由链接的高亮通过activeClassName制定样式名 2.标签体内容是一个特殊的标签属性 3.通过this.props.childern可以获取标签体内容
Switch的使用：路由注册时使用Switch标签包裹在组件匹配到后就不在往后面继续匹配
react网络请求不存在时将直接返回index.html文件。react进行二级路由时会发生样式丢失原因为直接在一级路由下加载根路径下的文件 解决方案：写public的绝对路径(%PUBLIC_URL%/ /css/)，或将 BrowserRouter 改为hashRouter，使根访问路径后面多一个#号（http://localhost:3000/#/）
路由的模糊匹配与严格匹配：react默认开启模糊匹配：路由标签里面的可以在链接标签里面从前往后模糊匹配，使用exact={true}属性开启严格匹配模式，redirect标签制定默认跳转方向

前端路由的实现：
路由的实现离不开history库其特点是管理浏览器历史，包装原生BOM 中window.history和window.location.hash
history 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){}): 监视历史记录的变化

嵌套路由参数传递
1.params参数
路由链接(携带参数)：<Link to=‘/demo/test/tom/18’}>
注册路由(声明接收)：
接收参数：this.props.match.params
2.search参数
路由链接(携带参数)：<Link to=‘/demo/test?name=tom&age=18’}>详情
注册路由(无需声明，正常注册即可)：
接收参数：this.props.location.search
备注：获取到的search是urlencoded编码字符串，需要借助querystring解析
3.state参数
路由链接(携带参数)：<Link to={{pathname:‘/demo/test’,state:{name:‘tom’,age:18}}}>详情
注册路由(无需声明，正常注册即可)：
接收参数：this.props.location.state
备注：刷新也可以保留住参数**

BrowserRouter与HashRouter的区别
1.底层原理不一样：
BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
HashRouter使用的是URL的哈希值。
2.path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
3.刷新后对路由state参数的影响
(1).BrowserRouter没有任何影响，因为state保存在history对象中。
(2).HashRouter刷新后会导致路由state参数的丢失！！！
4.备注：HashRouter可以用于解决一些路径错误相关的问题。

编程式路由导航：
借助this.prosp.history对象上的API对操作路由跳转、前进、后退
-this.prosp.history.push()
-this.prosp.history.replace()
-this.prosp.history.goBack()
-this.prosp.history.goForward()
-this.prosp.history.go()

reactx:

1. redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库)
2. 它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用
3. 作用: 集中式管理 react 应用中多个组件共享的状态

redux工作流程：

使用情况：

1. 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用
2. 某个组件的状态，需要共享
3. 某个状态需要在任何地方都可以拿到
4. 一个组件需要改变全局状态
5. 一个组件需要改变另一个组件的状态

核心API
redux中包含: createStore(), applyMiddleware(), combineReducers()
store对象: getState(), dispatch(), subscribe()
react-redux: , connect()()
redux核心概念：
action:
默认是对象(同步action), {type: ‘xxx’, data: value}, 需要通过对应的actionCreator产生,
它的值也可以是函数(异步action), 需要引入redux-thunk才可以
reducer
根据老的state和指定的action, 返回一个新的state
不能修改老的state
store
redux最核心的管理对象
内部管理着: state和reducer
提供方法: getState(), dispatch(action), subscribe(listener)
数(异步action), 需要引入redux-thunk才可以
reducer
根据老的state和指定的action, 返回一个新的state
不能修改老的state