1. render函数没有渲染的作用，只是将jsx转译成一个react.createElement函数。
微信图片_20180503092057.jpg
JSX:
<button type="submit">
Save
</button>
Transpiled JS:
React.createElement(
"button",
{ type: "submit" },
"Save"
);
2.state less:提倡无转态组件
蓝色为stateless，黑色为stateful
微信图片_20180503094134.jpg
这个组件什么都不画，只是做一个心跳动作
import React from 'react';
export default class HeartBeat extends React.Component {
render() {
return null;
}
componentDidMount() {
this.timer = setInterval(() => {
fetch('/api/v1/heartbeat');
}, 5000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
}
3.生命周期
- mount
- componentDidMount 只有在客户端执行
- update
shouldcomponentupdate 可以截胡，提高性能
因state改变引发的update过程：
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
因父组件想要render这个组件改变引发的update过程：
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate
这些函数应该都是纯函数
- unmount
3 高阶组件
函数，接收参数，返回一个全新组件
const HoC = (WrappedComponent) => {
const WrappingComponent = (props) => (
<div className="foo">
<WrappedCompoent {...props} />
</div>
);
return WrappingComponent;
};
可以多个参数动态创造不同的组件
const HoC = (WrappedComponent, LoginView) => {
const WrappingComponent = () => {
const {user} = this.props;
if (user) {
return <WrappedComponent {...this.props} />
} else {
return <LoginView {...this.props} />
}
};
return WrappingComponent;
};
4.通信
不推荐用ref来进行通信
5.key
1.兄弟唯一性
2.稳定性
三元表达式不需要用到key
6.总结
一切都是组件，可以是有渲染的，一个没有渲染的。
