使用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: HangzhouHello,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'));