Giter VIP home page Giter VIP logo

Comments (9)

eyasliu avatar eyasliu commented on June 19, 2024 1

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>
    )
  }
}

from react-lite.

Lucifier129 avatar Lucifier129 commented on June 19, 2024

Thx for feedback.

working on it...

from react-lite.

Lucifier129 avatar Lucifier129 commented on June 19, 2024

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

from react-lite.

eyasliu avatar eyasliu commented on June 19, 2024

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

from react-lite.

Lucifier129 avatar Lucifier129 commented on June 19, 2024

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

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

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

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

from react-lite.

Lucifier129 avatar Lucifier129 commented on June 19, 2024

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

from react-lite.

eyasliu avatar eyasliu commented on June 19, 2024

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

from react-lite.

Lucifier129 avatar Lucifier129 commented on June 19, 2024

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

from react-lite.

eyasliu avatar eyasliu commented on June 19, 2024

更新后正常了,给力!!

from react-lite.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.