setState component in react-router, the children componet not rerender

[eyasliu]

我使用了react-router用做路由，redux 用作数据流， react-redux 的Provider在Route中。
当使用react-lite时，调用setState时只有当前组件触发重渲染，子组件未重渲染。
如果使用 react 时，则当前组件和子组件都会重渲染

[eyasliu]

index.js

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, hashHistory, IndexRoute} from 'react-router';


import APP from './App';
import Example from './Example';
import Home from './Home';



render(
  <Router history={hashHistory}>
    <Route path="/" component={APP}>
      <Route path="home" component={Home}>
        <Route path="example" component={Example}></Route>
      </Route>
    </Route>
  </Router>
, document.getElementById('app'))

APP.js

import React from 'react';
import {Link} from 'react-router';

import {createStore} from 'redux';
import {Provider} from 'react-redux';

const store = createStore(() => {})

export default class App extends React.Component{
  constructor(props){
    super();
    this.state = {
      count: 0
    }
  }

  componentDidMount(){
    setInterval(() => {
      this.setState({
        count: this.state.count + 1
      })
    }, 1000)
  }

  render(){
    console.debug('APP render')
    return (
      <Provider store={store}>
        <div>
          <div>
            <Link to="/">back app</Link>
            <Link to="/home">go home</Link>
            <Link to="/home/example">go to example</Link>
            <div>count: {this.state.count}</div>
          </div>
          <div>
            {this.props.children}
          </div>
        </div>
      </Provider>
    )
  }
}

Home.js

import React from 'react';
import {Link} from 'react-router';

export default class Home extends React.Component{
  constructor(props){
    super()
  }

  componentWillReceiveProps(){
    console.debug('home receive new prop')
  }

  render(){
    console.debug('Home rendering');
    return (
      <div>
        this is Home Componnet
        <div>
          {this.props.children}
        </div>
      </div>
    )
  }
}

Example.js

import React from 'react';
import {Link} from 'react-router';

export default class Example extends React.Component{
  constructor(props){
    super()
  }

  componentWillReceiveProps(){
    console.debug('example receive new prop')
  }

  render(){
    console.debug('Example rendering');
    return (
      <div>
        this is Example Componnet
      </div>
    )
  }
}

[Lucifier129]

Thx for feedback.

working on it...

[Lucifier129]

I found it just worked well when I run the code that you provide.

[eyasliu]

yes, It work well. but, please attention console in react and react-lite, they will work not the same

[Lucifier129]

还是用中文写吧，英文太麻烦，外国友人遇到同类问题，就让他们用 google 翻译一下。

问题出在 App component 里 setInterval 时，setState 更新视图，但 this.props.children 没有变化，react-lite diff 的时候直接略过了它，而 react 没有。

我觉得这应该是 react 的问题。

不知道 react-lite 这个特性引起了什么实际问题？

[Lucifier129]

我知道问题了，context 传递不下去。

[eyasliu]

我在APP设置了context， context中的数据变化后，子级组件的context不会变化

[Lucifier129]

更新一下 react-lite 到 v0.15.10 版本，问题应该解决了

[eyasliu]

更新后正常了，给力！！