使用ES6基础知识来持续更新我的知识库

1.合理使用对象解构技巧

//这里表示函数接受一个参数，该参数有一个Home属性，该Home属性是一个对象有location和phoneNum两个子属性
const sayHello = ({Home:{location,phoneNum}})=>{
    console.log("Hello,my location:",location);
    console.log("Hello,my phoneNum:",phoneNum);
}
sayHello({Home:{location:"Hangzhou",phoneNum:"18340816452"}});

打印内容如下:

Hello,my location: Hangzhou
Hello,my phoneNum: 18340816452

下面是redux-async-connect库的一个用法:

@asyncConnect([{
  deferred: true,
  //promise函数接受一个对象作为参数，该对象的store属性含有dispatch和getState两个子属性
  promise:({store:{dispatch,getState}}) =>{
    if(!isLoaded(getState())){
      return dispatch(loadWidgets());
    }
  }
}])

注意：在函数内部打印Home属性将会报错,因为此处我们只是将我们传入的Home对象本身进行了属性解构而已，而Home本身并不存在!

2.处理controlled组件
请参考下面的例子:

 class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value
    });
  //这样虽然我们有了两个input,但是我们依然将它绑定到了this.state中了
  //注意这里的:this.setState({[name]: value});
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}
ReactDOM.render(
  <Reservation />,
  document.getElementById('example')
);