react初识

1.yarn create react-app my-app
// 解构this.props
let { avatar, username, content, id } = this.props;

// 记着这么写 优化：如果state是同一个引用就不再渲染一次
2.export default class App extends React.PureComponent 
3.  // react 最好不要操作同一个对象
    // 每次更新状态都需要返回一个新的状态 PureComponent
    // PureComponent 优化了 shouldComponentUpdate方法，发现如果返回的是一个状态还是以前的引用地址不会更新
    // 必须返回新对象
    如果我们这么做： this.state.users.push({ avatar: '', content: val, username: 'zfpx' })
    那么就会发现这个同一个对象this.state.users 指向同一个hash值,就不会触发视图更新
    let users = [...this.state.users, { avatar: '', content: val, username: 'zfpx' }];
4.res = await axios.get('/user.json')   返回的是请求到的数据
         axios.get('/user.json') 返回的是一个promise
         await 后面如果是一个promise的话，返回的就是promise返回的结果，这里就是数据
         这个其实和axios.get('/user.json').then(res => {.........})是一样的,只不过这里是直接拿到了res，可以在下面写应用res了
5.拦截器：这么写是为了返回的数据可以直接用，不用层层嵌套,其实就是修改响应对象response
axios.interceptors.response.use(function (res) {
  if (res.data.code === 0) {
    return res.data.users
  } else {
    return Promise.reject('错误');
  }
})
7. <Provider value={{increment:this.increment,color:'red'}}>这个双括号是什么意思
      就是value是传入了一个对象，有两个属性，increment和color
8.父组件给子组件传参数：{...this.state}
    <list {...this.state} removeById={this.removeById}></List>
    <List users={this.state.users} removeById={this.removeById}></List>
    上面的{...this.state} 其实就是看state中有什么，如果有的话就全部拿出来
  子组件给父组件传值： 比如上面这个removeById,父给子传一个函数,在子组件回调，子组件在调用时传入自己的状态
  依赖 props 来传递事件的引用，并通过回调的方式来实现的，这样实现不是特别好，但在没有任何工具的情况下是一种简单的实现方式。 
  react中当state发生改变时，组件才会update。在父组件中设定state的初始值以及处理该state的函数，
  同时将函数名通过以props属性值的形式传入子组件，子组件通过调用父组件的函数，进而引起state变化，达到在父组件中展示子组件产生的变化。
  handleSubmit =(e)=>{
    // 取消form表单的默认发送数据功能
    e.preventDefault();
    this.props.addUser(this.content.current.value);
  }
9.受控组件：受状态控制
    let val = e.target.name
    怎么把一个变量设置为一个对象的属性
    this.setState({
      [val]:e.target.value
    })
10.非受控组件:操作dom，很方便
  b=React.createRef();
  handleClick = () =>{
    拿到input 的 value
    alert(this.a.value); // 写法1
    alert(this.b.current.value) // 写法2
  }
  render(){
    return (<div>
    // 第一种: 用dom 和 this.a  把this和dom关联起来
      <input type="text" id="username" ref={dom=>this.a=dom}/>
    // 第二种：用b=React.createRef(); ref={this.b}关联起来
      <input type="text" id="password" ref={this.b}/>
      <button onClick={this.handleClick}>点击</button>
    </div>)
  }