@(StuRep)2016.06.10

React的PropTypes运用要领

React.PropTypes.array // 数组

React.PropTypes.bool.isRequired // Boolean 且必要。 

React.PropTypes.func // 函式 

React.PropTypes.number // 数字

React.PropTypes.object // 对象 

React.PropTypes.string // 字符串 

React.PropTypes.node // 任何范例的: numbers, strings, elements 或许任何这类范例的数组

React.PropTypes.element // React 元素 

React.PropTypes.instanceOf(XXX) // 某种范例的实例

React.PropTypes.oneOf(['foo', 'bar']) // 个中一个字符串

React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.array]) // 个中一种花样范例

React.PropTypes.arrayOf(React.PropTypes.string) // 某种范例的数组(字符串型) 

React.PropTypes.objectOf(React.PropTypes.string) // 具有某种属性范例的对象(字符串范例) 

React.PropTypes.shape({ // 是不是相符指定花样的对象
    color: React.PropTypes.string, 
    fontSize: React.PropTypes.number 
}); 

React.PropTypes.any.isRequired // 可所以任何花样，且必要。 

_

react-redux中的connect要领

//绑定状况到props上面
function mapStateToProps(state) {
    return {
        year: state.calendarReducer.year,
        month: state.calendarReducer.month,
        day: state.calendarReducer.day
    }
}

//把action一切要领绑定到props上面，同时action具有了dispatch才能
function mapDispatchToProps(dispatch) {
    return {actions: bindActionCreators(CalendarActions, dispatch)}
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

mapStateToProps 监听store变化，增加这个才能让组件监听到store内里的状况;

Redux 有一个全局的state，经由过程将根组件包进Provider，将store分发给一切的子组件，而子组件经由过程connect要领，猎取dispatch事宜分发函数，以及须要的props(假如有须要也可以经由过程connect传入想分发给子组件的action)
_

如何用Redux去治理React的状况

在不运用
Redux的时刻，
React组件间的状况治理须要一层层地通报，运用
Redux可以在最顶层的
store中存储一切的状况，每一个组件都可以取得这些状况值。

Redux重要的三部份：

• Store
• Action
• Reducer

简朴的流程：dispatch(action)把action分发到reducer，reducer更新状况然后返回到store，总的容器组件(app)从store(this.props)中猎取的值有变，传给子组件的属性变化，触发render从新衬着。

action

Redux中，action重要用来通报操纵State的信息，以一个js对象的情势存在，除了个中的type字段为必需的，其他字段都可以定义。假如采纳直接声明action的体式格局，在action越来越多的时刻就会很难治理，所以有了action的组织工场：

//action建立函数
export function getNextMonth() {
    return {type: GET_NEXT_MONTH}
}

reducer

action用来通报信息，reducer就用来处置惩罚信息，传入一个旧的state来返回一个新的state。

reducer应当坚持“纯函数”特征，入参雷同，出参效果肯定雷同。这也是函数式编程的特性。

function calendarReducer(state = initialState, action) {

    switch (action.type) {
        case GET_NEXT_MONTH:
            return state.month >= 12 ? {...state, year: ++state.year, month: 1} : {...state, month: ++state.month};
        case GET_PRE_MONTH:
            return state.month <= 1 ? {...state, year: --state.year, month: 12} : {...state, month: --state.month};
        default:
            console.log("default calendarReducer state");
            return state;
    }
}

在reducer中，须要传入一个默许的state参数，在dispatch一个action区触发state修正的时刻，假如reducer中并没有匹配到该action，那就肯定要返回一个旧的state，不然会形成undefined。

别的，在修正状况的时刻，不要经由过程直接修正当前state，而是经由过程建立一个副本去修正，可以用ES6中的Object.assign要领：

return Object.assign({}, state, {
        XXX:XXX
})

或许运用ES7提案中的对象睁开运算符(…)：

switch (action.type) {
        case GET_NEXT_MONTH:
            return state.month >= 12 ? {...state, year: ++state.year, month: 1} : {...state, month: ++state.month};
        case GET_PRE_MONTH:
            return state.month <= 1 ? {...state, year: --state.year, month: 12} : {...state, month: --state.month};
        default:
            console.log("default calendarReducer state");
            return state;
    }

在运用ES7的睁开运算符的时刻须要增加一个插件来支撑，由于现在该语法还处于stage2阶段：

query: {
        presets: ['react', 'es2015'],
        plugins: ['transform-object-rest-spread']
}

store

在 Redux 项目中，Store 是单一的。维护着一个全局的 State，而且依据 Action 来举行事宜分发处置惩罚 State。可以看出 Store 是一个把 Action 和 Reducer 结合起来的对象。

Redux 供应了 createStore() 要领来 临盆 Store，如：

let store = createStore(calendarApp);

react-redux 供应一个<Provider>组件把全部app包在内里，以 React 组件的情势来为 Provider 注入 store，从而使得其子组件可以在上下文中获得 store 对象，同享同一个store，如：

let rootElement = document.getElementById('main');

render(
    <Provider store={store}>
        <App />
    </Provider>,
    rootElement
);

_

组件的生命周期

componentWillMount

componentWillMount()

服务器端和客户端都只挪用一次，在初始化衬着实行之前马上挪用。假如在这个要领内挪用 setState，render() 将会感知到更新后的 state，将会实行仅一次，只管 state 转变了。

componentDidMount

componentDidMount()

在初始化衬着实行以后马上挪用一次，仅客户端有用（服务器端不会挪用）。在生命周期中的这个时候点，组件具有一个 DOM 展示，可以经由过程 this.getDOMNode() 来猎取响应 DOM 节点。

假如想和别的JavaScript 框架集成，运用setTimeout 或许setInterval 来设置定时器，或许发送 AJAX 要求，可以在该要领中实行这些操纵。

componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在组件接收到新的 props 的时刻挪用。在初始化衬着的时刻，该要领不会挪用。

用此函数可以作为 react 在 prop 传入以后， render() 衬着之前更新 state 的时机。老的 props 可以经由过程 this.props 猎取到。在该函数中挪用 this.setState() 将不会引起第二次衬着。

shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

在接收到新的 props 或许 state，将要衬着之前挪用。该要领在初始化衬着的时刻不会挪用，在运用 forceUpdate 要领的时刻也不会。

假如肯定新的 props 和 state 不会致使组件更新，则此处应当 返回 false。

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

假如 shouldComponentUpdate 返回 false，则 render() 将不会实行，直到下一次 state 转变。（别的，componentWillUpdate 和 componentDidUpdate 也不会被挪用。）

默许情况下，shouldComponentUpdate 总会返回 true，在 state 转变的时刻防止纤细的 bug，然则假如老是小心肠把 state 当作不可变的，在 render() 中只从 props 和 state 读取值，此时可以掩盖 shouldComponentUpdate 要领，完成新老 props 和 state 的比对逻辑。

假如机能是个瓶颈，尤其是有几十个以至上百个组件的时刻，运用 shouldComponentUpdate 可以提拔运用的机能。

componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在接收到新的 props 或许 state 之前马上挪用。在初始化衬着的时刻该要领不会被挪用。
运用该要领做一些更新之前的准备工作。

componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在组件的更新已同步到 DOM 中以后马上被挪用。该要领不会在初始化衬着的时刻挪用。
运用该要领可以在组件更新以后操纵 DOM 元素。

componentWillUnmount

componentWillUnmount()

在组件从 DOM 中移除的时刻马上被挪用。

在该要领中实行任何必要的清算，比方无效的定时器，或许消灭在 componentDidMount中建立的 DOM 元素。