react详解,reAct

1、cookie库

cookie的库有很多，网上选一款适合即可。

如:

　browser-cookies

地址:

https://www.npmjs.com/package/browser-cookies

2、高阶组件

高阶组件通过包裹被传入的React组件，经过一系列处理，最终返回一个相对增强的React组件，供其他组件调用。

1)基于属性代理的方式

它通过做一些操作，将被包裹组件的props和新生成的props一起传递给此组件，这称之为属性代理。

export default function withHeader(WrappedComponent) { return class HOC extends Component { render() { const newProps = { test:'hoc' } // 透传props，并且传递新的newProps return <div> <WrappedComponent {...this.props} {...newProps}/> </div> } }}

2)基于反向继承的方式

这种方式返回的React组件继承了被传入的组件，所以它能够访问到的区域、权限更多，相比属性代理方式，它更像打入组织内部，对其进行修改。

export default function (WrappedComponent) { return class Inheritance extends WrappedComponent { componentDidMount() { // 可以方便地得到state，做一些更深入的修改。 console.log(this.state); } render() { return super.render(); } }}

资料

3、prop-types

创建的组件是可以复用的，所以我们开发的组件可能会给项目组其他同事使用。但别人可能对这个组件不熟悉，常常会忘记使用某些属性，或者某些属性传递的数据类型有误。因此我们可以在开发 React自定义组件时，可以通过属性确认来声明这个组件需要哪些属性。

资料

4、websoket

express与websoket需要注意连接到一起使用写法:const server = require('http').server(app)const io = require('socket.io')(server)前端使用要写具体的具体的ip加端口地址链接

5、react生命周期

jsx babel转换 React.createElement保存在内存中
虚拟DOM React.createElement保存DOM树，diff算法

Initial render 父组件render | | constructor componentWillReceiveProps | | componentWillMount shouldComponentUpdate <- this.setState | | | componentWillUpdate <- this.forceUpdate | | ————————————————————— render ———————————————— | | componentDidMount componentDidUpdate |___________________________________________| | componentWillUnmount 组件卸载执行

shouldComponentUpdate(nextProps, nextState) 两个参数，可以定制渲染，当满足条件返回true就执行render渲染

this.setState 是队列机制并且是异步的，更新只会执行render更新一次

全局context contextTypes = { color: React.PropTypes.string } 然后通过getChildText方法，来给子context对象的属性赋值： getChildContext() { return {color: "purple"}; } childContextTypes = { color: React.PropTypes.string };

6、react优化

事件this处理，在construct bind(this) 这样性能会比较好传输数据时，尽可能的减少数据的传输，只传有必要的数据reactURL加?react_pert可以在chrome的性能面板直接查看，performance因为每次数据的变化都会触发render，而优化可使用shouldComponentUpdate决定渲染达到性能优化如果组件是根据状态渲染，没有复杂的值变动，可以使用React.PureComponent,他比shouldComponentUpdate更好一些，不会渲染没有变动状态的组件数据结构不要太复杂，这回影响性能，因为react只会浅比较，深层的数据结构，只能认为数据变动，然后render

 

immutableImmutable数据就是一旦创建，就不能更改的数据。每当对Immutable对象进行修改的时候，就会返回一个新的Immutable对象，以此来保证数据的不可变。 优点： 1、减少内存使用 2、并发安全 3、降低项目复杂度 4、便于比较复杂的数据，定制shouldComponentUpdate方便 缺点: 1、学习成本 2、库的大小 3、对先有的项目入侵严重 reselect性能优化 Selector可以计算衍生的数据,可以让Redux做到存储尽可能少的state。 Selector比较高效,只有在某个参数发生变化的时候才发生计算过程. Selector是可以组合的,他们可以作为输入,传递到其他的selector. 数组遍历 key可以提高性能，因为key唯一标识符，但使用索引不能提高 eslint 代码检查定制 异步函数 async+await 配合使用，await必须在async里使用，使用他们代码更加简单 async (res)=>{ const data = await axios.post(....) //同步，需要等待它返回才往下走 data.... }

7、SSR:

首先我们需要知道SSR对于SPA的好处，优势是什么。
更好的SEO（Search Engine Optimization），SEO是搜索引擎优化，简而言之就是针对百度这些搜索引擎，可以让他们搜索到我们的应用。这里可能会有误区，就是我也可以在index.html上写SEO，为什么会不起作用。因为React、Vue的原理是客户端渲染，通过浏览器去加载js、css，有一个时间上的延迟，而搜索引擎不会管你的延迟，他就觉得你如果没加载出来就是没有的，所以是搜不到的。
解决一开始的白屏渲染，上面讲了React的渲染原理，而SSR服务端渲染是通过服务端请求数据，因为服务端内网的请求快，性能好所以会更快的加载所有的文件，最后把下载渲染后的页面返回给客户端。

服务器端使用react 因为后台没有什么css之类的，所以使用使用钩子，css-modules-require-hook 这个包来兼容asset-require-hook 处理服务器端无法加载图片错误的 node支持babel 需要安装babel-cli 在script里配置NODE_ENV=test nodemon --exec babel-node server.jsnode中支持jsx，需要配置文件.babelrc

资料

 

转载于:https://www.cnblogs.com/zhangzhicheng/p/9576416.html