React的菜鸟之路(一)

目前流行的三大框架只会Vue，总有一种不学习就要被淘汰的危机感（来自老年人的危机），祝我早日从react的坑里爬出来，然后继续下一个吧哈哈哈哈。如果你也是像我一样的React小白，推荐看：http://jspang.com（里边是大佬录制的免费视频）。

• React生命周期(生命周期函数指在某一个时刻组件会自动调用执行的函数)

1. componentWillMount : 在组件即将被挂载到页面的时刻执行。
2. render : 页面state或props发生变化时执行。
3. componentDidMount : 组件挂载完成时被执行。
4. shouldComponentUpdate:函数会在组件更新之前被执行，返回false就不会继续往下执行，返回true继续执行。
5. componentWillUpdate在组件更新之前，在shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false，这个函数就不会被执行了。
6. componentDidUpdate：在组件更新之后执行，它是组件更新的最后一个环节。

7. componentWillUnmount：当组件从页面中删除的时候执行。

还有一个比较特殊的componentWillReceiveProps 声明周期函数，只有能接收props的子组件中才执行，顶层组件中不执行。

子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。

• 也就是说这个组件第一次存在于Dom中，函数是不会被执行的;
• 如果已经存在于Dom中，函数才会被执行。

React生命周期图

组件性能优化小知识点：以todolist为例（别问todolist是啥，除了HelloWorld就是它了，不知道找度娘哈）

  如何避免输入框输入时重复渲染list子组件？

// 利用shouldComponentUpdate 组件性能优化

  shouldComponentUpdate (nextProps, nextState) {

    if (nextProps !== nextState) {

      return false； // 不继续往下执行，也就不会执行子组件的render函数

    } else {

      return true

    }

  }

• 使用dangerouslySetInnerHTML解析HTML报错：Error: Can only set one of `children` or `props.dangerouslySetInnerHTML

{/* dangerouslySetInnerHTML:{{__html:item}} 解析HTML 
  <li></li>标签之间不能有内容，空格也不允许*/}
  <ul>
        
       {
         this.state.list.map((item, index) => {
            return (
               <li key={index} 
                   onClick={this.deleteItem.bind(this, index)}
                   dangerouslySetInnerHTML={{__html:item}}
               ></li>
            )
          })
        }
   </ul>

• 在构造函数里面bind this优于在上述代码中的this绑定

constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

• React是单向数据流，也是react重要的特性之一

   父组件可以直接给子组件传值，但是子组件只能使用接收的值，不能直接修改。若是要修改父组件的数据只能通过父组件传递过来的方法进行修改。

• setState是异步执行操作，有时间延迟

   this.setState({

       value: this.state.value+1

   })

console.log(this.state.value)

会先执行console.log语句，然后执行setState，所以打印出来的值不是更新后的，若要打印更新后的值，可以使用setState的异步回调

 this.setState({

       value: this.state.value+1

  },() => {

    console.log(this.state.value)

  })

• React ref使用

   <input

      value={this.state.value}

      onChange={this.inputChange.bind(this)}

       ref={ input => this.input = input } />

获取input的值可以由this.state.value ===>通过 ref 获取 this.input.value

• React绑定全局方法

以axios为例吧，Vue习惯了直接在main.js文件里面使用Vue.prototype.$axios = function(){}的方式绑定全局axios，但是React咋整，一个一个文件引入？懒人真的很蓝瘦，百度了好久，就找到下面这种方式，不知道性能怎么样，希望路过看到的大佬们还可以给出其他的建议。

在入口index.js文件中（还是以axios为例）

import axios from './axios/axios'; // 这是我自己进行封装过的axios

// React.$axios = function () {} // 度娘给我的方法

   React.$axios = axios;

  在组件中使用时

  React.$axios.post(......)