创建

  • ES6 方式 ```typescript import React from ‘react’; class MyComponent extends React.Component { constructor(props) {
    1. super(props);
    } render() {
    1. return ( <div>Hi</div> )
    } }

export default MyComponent;

  2. - ES5 方式：已过时，不支持 class，支持 IE8 
  3. ```typescript
  4. import React from 'react';
  6. const MyComponent = React.createClass({
  7.     render() {
  8.       return ( <div>Hi</div> )
  9.   }
  10. })

props

接收外部数据
接收外部函数
只读不写

  1. class Parent extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {n: 0}
  5.   }
  6.   onClick = () => { this.setState({ n: this.state.n + 1 }); }
  7.   render() {
  8.     return (<Son n={this.state.n} onClick={this.onClick}>Hi</Son>)
  9.   }
  10. }
  12. class Son extends React.Component {
  13.   constructor(props) {
  14.     super(props);
  15.   }
  16.   render() {
  17.     return (
  18.       <div>
  19.         {this.props.n} <button  onClick={this.props.onClick}>+1</button>
  20.         <div>
  21.           {this.props.children}
  22.         </div>
  23.       </div>
  24.     )
  25.   }
  26. }

3.png

state

setState 的 shallow merge : React 只会检查新 state 和旧 state 第一层的区别，并把新 state 缺少的数据从旧 state 里拷贝过来