React学习过程（二）

父子组件传值

父组件经过属性（A）向子组件传值（可是记住只能传值，不能修改这个值）

子组件接收：

this.props.A
复制代码

子组件操做父组件的数据：经过父组件向子组件传递方法，子组件调用这个方法来间接操做这个数据 ！！！注意加上.bind（this）

PropTypes 和 DefaultProps

PropTypes：对传入参数作校验

TodoItem.propTypes = {
    content:PropTypes.string,
    deleteItem:PropTypes.func,
    index:PropTypes.number
}
复制代码

DefaultProps：设置属性默认值

props，state与render函数

当组件的state或者props发生改变时，render函数就会从新执行。

当父组件的render函数被运行时，它的子组件的render都将被从新执行一次

react中的虚拟DOM

提升性能缘由： 减小了对真实dom的建立以及真实dom的对比，取而代之建立和对比的都是js对象

1.state数据

2.JSX模板

3.数据+模板 结合，生成虚拟DOM，（虚拟dom就是一个JS对象，用它来描述真实DOM）建立js对象损耗性能很小

4.用虚拟DOM的结构生成真实的DOM，来显示

5.state发生变化

6.生成新的虚拟dom

7.比较原始虚拟dom和新的虚拟dom区别，找到区别直接在真实的dom中改

渲染成真实DOM过程

JSX -> createElement -> 虚拟DOM(js对象) -> 真实的DOM

虚拟DOM带来的好处

1.性能提高

2.使得跨端应用得以实现（不只在浏览器中运行，还能在原生应用组件使用）

关于ref

ref是在react中直接获取dom元素的时候使用，通常在动画中须要操做dom

！！！另外setstate和ref合用时，dom获取并不及时，由于setstate是异步的，若是但愿页面更新后再去获取dom，必定要把获取dom的语法放在setstate第二个参数的函数中，由于他是一个回调函数

react中的生命周期函数

初始化

constructor里去作setup props和state

Mounting过程：

componentWillMount:在组件即将被挂载到页面的时刻自动执行

接着执行render

compomentDidMount : 组件被挂载到页面后，自动被执行

Updation（更新）

当props和state改变时会执行

shouldComponentUpdate:组件被更新以前会自动被执行，而且会返回一个布尔值，true就是更新，false就是不要被更新。

如图所示

componentWillUpdate:组件被更新以前会被执行，可是她在shouldComponentUpdate以后被执行,若是shouldComponentUpdate返回true它才执行，若是返回false就不被执行

componentDidUpdate：组件更新完以后会被执行

componentWillReceiveProps:一个组件要从父组件接受参数，只要父组件的render函数被从新执行了，子组件的这个生命周期函数就会被执行

Unmounting过程

componentWillUnmount:当组件即将被从页面中剔除的时候会被执行。

生命周期函数的使用场景

shouldComponentUpdate：

提高组件性能，避免作无谓的render函数从新执行

shouldComponentUpdate(nextProps,nextState){  //接收两个参数
    if(nextProps.XXX !== this.props.XXX){
        return true;   //也就是说只有当XXX发生改变时咱们才去从新渲染
    }else{
        return false;  //不然不渲染
    }
}
复制代码

componentDidMount

由于在整个过程当中只执行一次，因此把ajax数据请求放在这里是比较合适的，由于ajax请求数据只一次就行了。

另外在react中使用ajax也是用axios

componentDidMount(){
    axios.get('/api/todolist')
    .then((res)=>{
        console.log(res);
        this.setState(() => ({
        list:[...res.data]
        })
    })
    .catch(()=>{alert('error')})
}
复制代码

react中的css过渡动画

使用react-transition-group，引入CSSTransition这个组件，再用这个组件名去包裹须要动画效果的标签。她会自动向标签中加入class样式。