react
(1)componentDidMount()
钩子,这是一个建立定时器的好地方
(2)componentWillUnmount()
生命周期钩子中卸载计时器
(3)关于setState:
setState()该函数将接收先前的状态作为第一个参数,将需要更新的值作为第二个参数
例如:this.setState((prevState, props) => ({ counter: prevState.counter + props.increment }));
(4)state和props的区别:
props:从父级传来的;随着时间推移不变
state:不能够根据组件中任何其他的 state 或 props 把它计算出来;可以随时间的改变而改变
(5)条件组件渲染:
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
} return <GuestGreeting />;
}
(6)jsx嵌入:
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div> <h1>Hello!</h1>
{unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> );
}
(7)阻止渲染:
可以return null
(8)状态提升,几个组件需要共用状态数据的情况,我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理
通过在父组件定义函数<TemperatureInput onTemperatureChange={this.handleCelsiusChange} />,传到子组件,自组建在父组件传下的参数上传递参数handleChange(e) {this.props.onTemperatureChange(e.target.value);} 达到状态提升的效果
(9)组合&继承
<SplitPane left={ <Contacts /> } right={ <Chat /> } />
还有props.children的继承方式
(10)扩展属性: ...
作为扩展操作符来传递整个属性对象