react总结杂烩2
1、cookie库 cookie的库有很多,网上选一款适合即可。 如: browser-cookies 地址: https://www.npmjs.com/package/browser-cookies 2、高阶组件 高阶组件通过包裹被传入的React组件,经过一系列处理,最终返回一个相对增强的React组件,供其他组件调用。 1)基于属性代理的方式 它通过做一些操作,将被包裹组件的 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保存在内存中 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 ? immutable Immutable数据就是一旦创建,就不能更改的数据。每当对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的好处,优势是什么。 服务器端使用react 因为后台没有什么css之类的,所以使用使用钩子,css-modules-require-hook 这个包来兼容
asset-require-hook 处理服务器端无法加载图片错误的
node支持babel 需要安装babel-cli 在script里配置NODE_ENV=test nodemon --exec babel-node server.js
node中支持jsx,需要配置文件.babelrc
资料 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |