Can somebody explain what really happens i the next context:
Let's assume i have an App component (parent) , and some children components let's say Index, Search, About and these 3 have their children.
What happen's when I call componentWillUpdate in App Component ... , the new state/ props will come but what will happen inside the leafs (children ), will they rerender themself ?
And let's say I overwrite something i DOM in this componentWillUpdate in App, and I'll the same thing in DOM in a leaf component in componentDidMount or componentWillMount... which value will be the last ?
First at all, you shouldn't call
componentWillUpdate manually. It is called by React if as part of it's lifecycle.
According to comment in ReactCompositeComponent.js this is what hapens during update phase:
Update Phases: - componentWillReceiveProps (only called if parent updated) - shouldComponentUpdate - componentWillUpdate - render - [children's constructors or receive props phases] - componentDidUpdate
As you can see
App.render is called before rendering children copmonents.
If you want to manipulate DOM manually for some reason,
componentWillUpdate is not the right place to do it. Use
componentDidUpdate after every update or
componentDidMount after the initial render. Children's
componentDidMount are triggered before the parent's lifecycle methods.
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?