1、样式
直接写在render里面

<button style={{height:100,width:100}}></button>//驼峰命名。双大括号，逗号连接，不写PX

写在外面用className

2、组件名称要大写开头

3、create里面函数要用=；

4、事件传参数

<button onClick={this.handleClick.bind(this, props0, props1, ...}></button>
handleClick(porps0, props1, ..., event) {
    // your code here
}

5、setState

this.setState({users})
this.setState((prevState) => {
        return {users: users};
      });

6、this指针

onClick={this.handleClick.bind(this)}

7、循环加一个key，唯一标识符
8、操作表单，value和defaultvalue
9、active的时候，/12路径，/同时也是active

<ul className="header">
                    <li><NavLink activeClassName="active" to="/" >表格</NavLink></li> //始终active
                    <li><NavLink activeClassName="active" to="/12" >表格</NavLink></li>
                    <li><NavLink activeClassName="active" to="/df">思维导图</NavLink></li>
                    <li><NavLink activeClassName="active" to="/lsy">其他</NavLink></li>
</ul>

10、上传文件夹

  componentDidMount() {
    this.refs.x.directory = true;
    this.refs.x.webkitdirectory = true;
  }
   <input ref='x' type="file"></input>

11、传递数字加大括号

<Greeting counter="{7}" />

12、PureComponent渲染数组，用扩展运算符。
如果state和prop一直变化的话，还是建议使用Component，并且PureComponent的最好作为展示组件
不要在PureComponent中使用shouldComponentUpdate，因为根本没有必要

    this.setState({
      arr: [...arr, '2']
    })

13、antd的defaultValue第一次渲染为undefine后不重新渲染
加个判断

          {selectTestMachine[0]?(
            <Select
              size="small"
              defaultValue={selectTestMachine[0]}
              style={{width:'200px'}}
              onChange={this.handleChange}
            >
              {selectTestMachine.map(item =>(
                <Option key={item} value={item}>
                  {item}
                </Option>
              ))}
            </Select>
            ):null}

14、增加监听，移除监听

  componentDidMount() {
    document.addEventListener('scroll', this.handScroll, { passive: true });
  }
  componentWillUnmount() {
    document.removeEventListener('scroll', this.handScroll);
  }

15、函数组件、类组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}