React学习过程（二）

最新推荐文章于 2024-07-16 11:36:24 发布

weixin_33805743

最新推荐文章于 2024-07-16 11:36:24 发布

阅读量109

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ccf96b4f265da039955efb8

版权

父子组件传值

父组件通过属性（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')})
}
复制代码