react总结杂烩2

Posted 2021-01-03 zhangzhicheng

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

 

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的好处，优势是什么。
更好的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.js

node中支持jsx，需要配置文件.babelrc

资料