开始之前,一定你已经学习 Redux 排错。
这个 warning 会在你使用 react 15.5.* 的时候出现。基本上,现上它只是一个 warning, 但是在 React16 当中可能会导致你的应用崩溃。现在 PropTypes 应该从 'prop-types' 包中 import,而不是从 react 包中 import。
更新到最新版本的 react-redux。
阅读上面的链接。 简而言之,
connect()
的 mapDispatchToProps
参数或者 bindActionCreators
来绑定 action creator 函数,你也可以手动调用 dispatch()
进行绑定。直接调用 MyActionCreators.addTodo()
并不会起任何作用,因为它只会返回一个 action 对象,并不会 dispatch 它。如果你正在使用 React Router 0.13,你可能会碰到这样的问题。解决方法很简单:当使用 <RouteHandler>
或者 Router.run
提供的 Handler
时,不要忘记传递 router state。
根 View:
Router.run(routes, Router.HistoryLocation, (Handler, routerState) => {
// 注意这里的 "routerState"
ReactDOM.render(
<Provider store={store}>
{/* 注意这里的 "routerState" */}
<Handler routerState={routerState} />
</Provider>,
document.getElementById('root')
)
})
嵌套 view:
render() {
// 保持这样传递下去
return <RouteHandler routerState={this.props.routerState} />
}
很方便地,这样你的组件就能访问 router 的 state 了! 当然,你可以将 React Router 升级到 1.0,这样就不会有此问题了。(如果还有问题,联系我们!)
如果 view 依赖全局的 state 或是 React “context”,你可能发现那些使用 connect()
进行修饰的 view 无法更新。
这是因为,默认情况下
connect()
实现了 shouldComponentUpdate,它假定在 props 和 state 一样的情况下,组件会渲染出同样的结果。这与 React 中 PureRenderMixin 的概念很类似。
这个问题的最好的解决方案是保持组件的纯净,并且所有外部的 state 都应通过 props 传递给它们。这将确保组件只在需要重新渲染时才会重新渲染,这将大大地提高了应用的速度。
当不可抗力导致上述解法无法实现时(比如,你使用了严重依赖 React context 的外部库),你可以设置 connect()
的 pure: false
选项:
function mapStateToProps(state) {
return { todos: state.todos }
}
export default connect(mapStateToProps, null, null, {
pure: false
})(TodoApp)
这样就表示你的 TodoApp
不是纯净的,只要父组件渲染,自身都会重新渲染。注意,这会降低应用的性能,所以只有在别无他法的情况下才使用它。
如果你有 context 的问题,
<Provider>
。如果你在 web 中使用 React,就通常意味着你重复引用了 React。按照这个链接解决即可。