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>;
}
}
