时隔半年,再次复习一下react
刚刚自己画了个react生命周期图,简版:
react生命周期图.png
顺便画了个react 技术栈的思维导图:
react.png
最后再提一提web component 这是一个规范 组件主要考虑2点:1.可复用 2.可维护
React 组件生命周期
组件的生命周期可分为以下三个状态:
- Mounting:已经插入真实Dom
- Updating: 正在被重新渲染
- Unmounting:已移除真实Dom
constructor() {
super();
console.log("constructor!");
this.state = {
comments: []
}
}
componentWillMount() {
console.log("componentWillMount!");
this._loadComments();
}
componentWillReceiveProps() {
console.log('Component WILL RECEIVE PROPS!')
}
shouldComponentUpdate() {
return true;
}
componentWillUpdate() {
console.log('Component WILL UPDATE!');
}
componentDidUpdate() {
console.log('Component DID UPDATE!')
}
componentWillUnmount() {
console.log('Component WILL UNMOUNT!')
}
render(){
return(<div></div>)
}
image.png
在es6中我们直接使用constructor 来初始化data
从父组件传东西到子组件,通过props。
如果从子组件传东西到父组件呢? 也可以利用props,但是传递的是一个handle(value)函数。
网友评论