定义组件

组件定义有两种方式，函数定义和类定义

函数定义组件

function Welcome(props) {  return 
Hello, {props.name}
;}const element = 
    ;ReactDOM.render(  element,  document.getElementById('root'));

类定义组件

class Welcome extends React.Component {  render() {    return 
Hello, {this.props.name}
;  }}ReactDOM.render(  
    ,  document.getElementById('root'));

警告:

组件的返回值只能有一个根元素。如果ReactDOM.render方法渲染组件里包含多个同级别的组件，需要用一个DIV将其他组件包裹

类定义组件有局部状态和生命周期钩子事件

通常类的状态是在类的构造函数中声明的

class Clock extends React.Component {  constructor(props) {    super(props);//只要类组件声明了构造函数就必须先调用父类的构造函数    this.state = {date: new Date()};  }  //更新状态  this.setState({      date: new Date()  });}

警告:

如果你不在 render() 中使用某些东西，它就不应该在状态中

钩子函数

componentDidMount(当组件插入到DOM中触发)

正确使用状态

1.不要直接更新状态，而是通过setState方法

// Wrongthis.state.comment = 'Hello';// Correctthis.setState({comment: 'Hello'});

2.状态的更新可能是异步的，你不应该依靠它们的值来计算下一个状态

// Wrongthis.setState({  counter: this.state.counter + this.props.increment,});当要被更新的状态依赖于props或它自身时，setState需要传递一个方法作为参数,第一个参数为它的前一个状态的值，第二个参数为props对象// Correctthis.setState((prevState, props) => ({  counter: prevState.counter + props.increment}));