React学习过程（二）

╰半橙微兮° 2022-10-01 07:58 152阅读 0赞

## 父子组件传值 ##

父组件通过属性（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样式。

转载于:https://juejin.im/post/5ccf96b4f265da039955efb8