循环、事件和生命周期、渲染

ゝ一纸荒年。 2021-07-24 13:34 387阅读 0赞

# 1. 循环 #

1.  在实际应用中 数据展示 是最基本的功能。
2.  React中使用的map（）进行列表的渲染

## 1.1 Keys ##

1.  Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此要给数组中的每一个元素赋予一个确定的标识。  
    **2. 一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串**

<li key={i}>
        {v}+++++++++{this.state.arr[i]}
    </li>
    
    <tr key={i}>
        <td>{v.name}</td> 
        <td>{v.age}</td> 
    </tr>

练手demo:

## 1.2 传递参数 ##

**向事件处理函数中传递参数。**

1.  方式1：通过 bind 的方式进行传递

<button onClick={this.fun.bind(this,"hahah")}>点我传递参数</button>

1.  方式2：通过箭头函数传递。注意使用箭头函数调用事件对象必须显式的进行传递

<button onClick={()=>this.funa("呵呵")}>点我传递参数</button>

## 1.3 阻止默认行为 ##

**React中阻止默认行为使用preventDefault()；**

## 1.4 修改this指向 ##

1.  方式1：通过bind方法进行原地绑定，从而改变this指向
2.  方式2：通过创建箭头函数
3.  方式3：在constructor中提前对事件进行绑定
4.  方式4：将事件调用的写法改为箭头函数的形式

# 2. Refs 转发 #

## 2.1 ref属性 ##

1.  React提供的这个ref属性(不能在函数式组件上使用ref属性，因为它们没有实例)表示为对组件真正实例的引用其实就是ReactDOM.render()返回的组件实例
2.  ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。
3.  一句话总结：==标识组件内部的

## 2.2 使用 ##

**React的ref有3种用法：**

*  字符串(官方不推荐使用)
 *  回调函数
 *  React.createRef() （React16.3提供）

1.  使用字符串  
    **最早的ref用法。使用this.refs.xxx来进行访问**
2.  使用回调函数  
    **回调函数就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用。**
3.  使用React.createRef()  
    **在React16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上该ref的current属性将能拿到dom节点或组件的实例**

## 2.3 官方建议 ##

**勿过度使用 Refs在对逻辑进行处理的时候尽量优先考虑state**

# 3. React 表单 #

## React负责渲染表单的组件。同时仍然控制用户后续输入时所发生的变化。相应的，其值由React控制的输入表单元素称为==“受控组件”==。 ##

# 4. React组件生命周期 #

## 4.1 React 生命周期分为三种状态： ##

1.  初始化 ：组件生命周期函数一辈子只执行一次
2.  运行/更新： 根据组件 state 跟 props 的改变，有选择性的触发0次或者多次
3.  销毁 ： 一辈子只执行一次

## 4.2 生命周期的方法有： ##

1.  componentWillMount 组件将要被挂载，此时还没有开始渲染虚拟 DOM（相对于 Vue 中的 created）
2.  componentDidMount 组件完成挂载，此时，组件已经显示到页面上了（相对于 Vue 中的mounted）
3.  componentWillReceiveProps 组件的props接收到值后调用，第一次不调用
4.  shouldComponentUpdate 判定组件是否要更新html
5.  componentWillUpdate组件即将更新html时候调用
6.  componentDidUpdate 在组件完成更新后立即调用。
7.  componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

## 4.3 销毁组件的方式： ##

ReactDOM.unmountComponentAtNode(document.getElementById("demodiv"));

钩子函数demo

# 5. React条件渲染 #

## 5.1 条件渲染 ##

1.  开发中，创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。
2.  React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

## 5.1.1if 语句 ##

**在React中使用if语句条件渲染是最简单的，但是注意jsx中不允许有if**

## 5.1.2 三目运算符 ##

**条件渲染的另一种方法是使用 JavaScript 的条件运算符:**

render(){
        return (
            <div>
                {this.state.bool?<Demoa/>:<Demob/>}
                <button onClick={this.fun}>点击控制显示</button>
            </div> 
        )
    }

## 5.1.3 && ##

**条件渲染的另一种方法是使用 JavaScript 的条件运算符&& 但是注意该种方法只能渲染一个组件**

render(){
        return (
            <div>
                {/* 使用三元运算符，但是只能控制一个显示 */}
                {this.state.bool==true&&<Demoa/>}
                <button onClick={this.fun}>点击控制显示</button>
            </div> 
        )
    }