react的refs/props/state

正确使用refs
不建议写法:

let Progress = React.createClass({
    show: function(){
        this.refs.modal.show();
    },
    render: function() {
        return (
           
        );
    }
});

正确写法:

let Progress = React.createClass({
    show: function(){
        this.modal.show();//注意这儿的this.refs.modal已被替换成this.modal
    },
    render: function() {
        return (
            { this.modal=com } }/>
        );
    }
});

正确使用props和state
不能直接修改state的状态

this.state.comment = 'Hello';//不正确的更新

props和state可能是异步的
示例:

//可能失败
this.setState({
  counter: this.state.counter + this.props.increment,
});

正确的用法:

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

setState可能不会立即修改this.state,如果你在setState之后立马使用this.state去取值可能返回的是旧的值。

setState这个方法可以接收两个参数,如下形式:

setState(nextState, callback)

它接收一个callback,它状态得到更新后,会执行这个callback,不过更推荐在componentDidUpdate中调用相关逻辑。

避免产生新的闭包
在子组件中,我们要避免以下写法

 { model.name = e.target.value }}
            placeholder="Your Name"/>

正确写法:


这样可以避免每次父组件重新渲染的时候,创建新的函数;

原文地址:https://www.jianshu.com/p/193c34e5eeeb

你可能感兴趣的:(react的refs/props/state)