react + redux Router + node实践总结(react模拟redux）

// 上面find的写法性能会更高些，因为$是由右至左查找元素
$('#test').find('img')
$('#test img')

React原理

• 虚拟DOM
• 生命周期
• setState
  组件更新的三种方式：
  
  1. setState: setState更新后依次执行（shouldComponentUpdate-> componentWillUpdate -> render() -> componentDidUpdate
  2. 父组件render：组件内部没有发生变化，但外部发生了变化，注意redux,props等的使用
  3. foreUpdate: 强制render，依次执行componentWillUpdate()-> render->componentDidUpdate

Redux原理

React+Redux常见性能优化策略

性能优化分为：

• react本身的性能优化（组件内部的性能优化，组件之间的性能优化，服务端性能优化：首屏加载快，运行速度快，路由懒加载）
• redux性能优化

Context

context是全局的，组件里声明，所有子元素可以直接获取

import React from 'react'
import PropTypes from 'prop-types'

// 顶级父组件
class Page extends React.Component {
    // 设置context时props是强类型的，需要在祖先组件和使用的子组件中对props做类型设置
    static childContextTypes = {
        user: PropTypes.String
    }
    constructor(props) {
        super(props)
        this.state = {user: 'lmh'}
    }
    // 在最顶级的父组件中设置context，其下面的所有的子组件都可以使用此属性
     getChildContext() {
         return this.state
     }
     render() {
         const user = 'lmh'
         return (
            <div>
                 <p>I am {this.state.user}</p>
                 <Sidebar></sidebar>
            </div>
        )
    }
}

// 子组件
class Sidebar extends React.Component {
    render() {
        return (
            <div>
                <p>侧边栏</p>
                <Navbar></Navbar>
            </div>
        )
    }
}

// 孙子组件
class Navbar extends React.Component {
    // 使用
    static contextTypes = {
        user: PropTypes.String
    }
    render() {
        return (
            // 在孙子组件中使用祖先组件中user属性
            <div>{this.context.user}的导航栏</div>
        )
    }
}

以上也可以使用react-redux解决
connect：负责连接组件，给到redux里的数据放到组件的属性里
Provider: 把store放到context里，所有的子元素可以直接取到store

// 实现Provider功能
class Provider extends React.Component {
    static childContextTypes = {
        store: PropTypes.object
    }
    getChildContext() {
        return {store: this.store}
    }
    constructor(props, context) {
        super(props, context)
        this.store = props.store
    }
    render() {
        return this.props.children
    }
}

实现connect

• 负责接收一个组件，把state里的一些数据入进去，返回一个组件
• 数据变化的时候，能够通知组件

// 写高阶函数时使用双箭头函数会比较简洁
export const connect = (mapStateToProps=state=>state, mapDispatchToProps={}) => (WrapComponent) => {
    return class ConnectComponent extends React.Component {
        static contextTypes = {
            store: PropTypes.object
        }
        constructor(props, context) {
            super(props, context)
            this.state = {
                props: {}
            }
        }
        componentDidMount() {
            const {store} = this.store
            this.update()
        }
        update() {
            // 获取mapStateToProps和mapDispatchToProps，放入this.props中
            const {store} = this.context
            const stateProps = mapStateToProps(store.getState())
        }
        render() {
            return <WrapComponent {...this.state.props}></WrapComponent>
        }
    }
}