React basics: render vs mount

In a React component, initial rendering happens before mounting. Rendering returns the elements which are supposed to be mounted in the DOM. Mounting a react component means the actual addition of the DOM elements created by the react component into the browser DOM for the first time.

render() function will be invoked every time rerendering happens in the component. It may happen either through a state change or a prop change.

总结：

• render先于mount
• render返回要mount的element，mount是对DOM的实际操作
• mounting只出现一次，rendering可以出现多次（状态或属性变化）

---

mounting相关function：

1. componentWillMount()
2. componentDidMount()
3. componentWillUnmount()

componentWillMount：在constructor()后render()前被调用

componentDidMount：在render()第一次在component里被call且DOM被更新后调用 (called in a component and the result is updated in the DOM)，在一个react component的lifetime中只能调用一次

componentWillUnmount：同didMount一样只能调用一次，在component unmounted from DOM前被调用 (right before the component is unmounted from the DOM)，一般用来写cleanup