组件(组件名称必须以大写字母开头。
)
函数组件
function Welcome(props){
return <h1>hello, {props.name}</h1>
}
类定义组件
class Welcome extends React.Component{
render(){
return <h1>hello, {props.name}</h1>
}
}
关于Setstate
1.不要直接更新状态(即不要直接用this.state.xxx=xxx来修改state状态)
2.状态更新可能是异步的
1.React 可以将多个setState()
调用合并成一个调用来提高性能。
因为 this.props
和 this.state
可能是异步更新的,你不应该依靠它们的值来计算下一个状态。
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
})
正确写法是用setState()
来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数,将需要更新的值作为第二个参数:
// Correct
this.setState(function(prevState, props) {
return {
counter: prevState.counter + props.increment
};
});
3.状态更新合并
当你调用 setState() 时
,React 将你提供的对象合并到当前状态。
4.数据自顶向下流动
事件处理
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault
。
用keys提取组件
元素的key只有在它和它的兄弟节点对比时才有意义。
比方说,如果你提取出一个ListItem
组件,你应该把key保存在数组中的这个<ListItem />
元素上,而不是放在ListItem组件中的<li>
元素上。