• 排错
    • View 不更新的问题
    • React Router 0.13 的 route 变化中,view 不更新
    • Redux 外部的一些东西更新时,view 不更新
    • 在 context 或 props 中都找不到 “store”
    • Invariant Violation:addComponentAsRefTo(…):只有 ReactOwner 才有 refs。这通常意味着你在一个没有 owner 的组件中添加了 ref

    排错

    开始之前,一定你已经学习 Redux 排错。

    View 不更新的问题

    阅读上面的链接。
    简而言之,

    • Reducer 永远不应该更改原有 state,应该始终返回新的对象,否则,React Redux 觉察不到数据变化。
    • 确保你使用了 connect()mapDispatchToProps 参数或者 bindActionCreators 来绑定 action creator 函数,你也可以手动调用 dispatch() 进行绑定。直接调用 MyActionCreators.addTodo() 并不会起任何作用,因为它只会返回一个 action 对象,并不会 dispatch 它。

    React Router 0.13 的 route 变化中,view 不更新

    如果你正在使用 React Router 0.13,你可能会碰到这样的问题。解决方法很简单:当使用 <RouteHandler> 或者 Router.run 提供的 Handler 时,不要忘记传递 router state。

    根 View:

    1. Router.run(routes, Router.HistoryLocation, (Handler, routerState) => { // 注意这里的 "routerState"
    2. ReactDOM.render(
    3. <Provider store={store}>
    4. {/* 注意这里的 "routerState" */}
    5. <Handler routerState={routerState} />
    6. </Provider>,
    7. document.getElementById('root')
    8. )
    9. })

    嵌套 view:

    1. render() {
    2. // 保持这样传递下去
    3. return <RouteHandler routerState={this.props.routerState} />
    4. }

    很方便地,这样你的组件就能访问 router 的 state 了!
    当然,你可以将 React Router 升级到 1.0,这样就不会有此问题了。(如果还有问题,联系我们!)

    Redux 外部的一些东西更新时,view 不更新

    如果 view 依赖全局的 state 或是 React “context”,你可能发现那些使用 connect() 进行修饰的 view 无法更新。

    这是因为,默认情况下 connect() 实现了 shouldComponentUpdate,它假定在 props 和 state 一样的情况下,组件会渲染出同样的结果。这与 React 中 PureRenderMixin 的概念很类似。

    这个问题的最好的解决方案是保持组件的纯净,并且所有外部的 state 都应通过 props 传递给它们。这将确保组件只在需要重新渲染时才会重新渲染,这将大大地提高了应用的速度。

    当不可抗力导致上述解法无法实现时(比如,你使用了严重依赖 React context 的外部库),你可以设置 connect()pure: false 选项:

    1. function mapStateToProps(state) {
    2. return { todos: state.todos }
    3. }
    4. export default connect(mapStateToProps, null, null, {
    5. pure: false
    6. })(TodoApp)

    这样就表示你的 TodoApp 不是纯净的,只要父组件渲染,自身都会重新渲染。注意,这会降低应用的性能,所以只有在别无他法的情况下才使用它。

    在 context 或 props 中都找不到 “store”

    如果你有 context 的问题,

    1. @dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375">确保你没有引入多个 React 实例 到页面上。
    2. 确保你没有忘记将根组件包装进 <Provider>
    3. 确保你运行的 React 和 React Redux 是最新版本。

    Invariant Violation:addComponentAsRefTo(…):只有 ReactOwner 才有 refs。这通常意味着你在一个没有 owner 的组件中添加了 ref

    如果你在 web 中使用 React,就通常意味着你@dan_abramov/two-weird-tricks-that-fix-react-7cf9bbdef375">引用了两遍 React。按照这个链接解决即可。