前端框架react----条件渲染、循环处理、受控组件

一、条件渲染

很多时候，用户可能会有多种操作需求，这个时候就需要我们对不同的操作选择不同的执行逻辑。

在react中，你可以创建不同的组件来封装各种你需要的行为，

react中的条件渲染和JavaScript中的一样，使用JavaScript运算法is或者条件运算符去创建元素来表现当前的状态，然后让React根据它们来更新UI，

比如我们创建一个十分简单的登录注册切换，首先，创建两个数组来展示登录或者注册：

function Login(props) {
    return (
        <button onClick={props.onClick}>去登陆</button>
    )
}

function Registered(props) {
    return (
        <button onClick={props.onClick}>去注册</button>
    )
}

接着，创建一个有状态的组件 LoginControl，在 state 中维护一个中间变量控制渲染哪一个组件，创建两个方法去改变这个中间变量的值：

this.state = {isLogin: false}

handelLogin() {
    this.setState({isLogin: true})
}

handelReginstered() {
    this.setState({isLogin: false})
}

 最终，在 render 函数中，我们通过 if 判断中间变量 isLogin 的值去决定渲染哪个组件

const isLogin = this.state.isLogin
let button 

if(isLogin) {
    button = <Login onClick={this.handelReginstered}></Login>
} else {
    button = <Registered onClick={this.handelLogin}></Registered>
}

这样通过将中间变量的值传递给组件的方式就实现了按照不同条件渲染不同组件的需求，当然，我们也可以使用更为简单的一种方式，比如三目运算符。通过中间变量的值，来选择需要显示的placeholder。

<input placeholder={isLogin ? '注册用户名': '登陆用户名'}></input>

二、循环处理

在实际的开发中，我们不可避免地会碰到列表这类数据的渲染。该怎么去处理这类数据，我相信你们脑海中浮现的第一种方式肯定就是循环

在 React 中处理数组转化为元素列表的方式基本就是这样

我们做一个 li 元素的遍历效果：

 使用 map 方法遍历数组，生成 li 元素，插入到 ul 元素中，最后在页面渲染.可以看到元素已经成功渲染到了页面

完全按照上面的方式创建 ul li 元素，毫无悬念我们会收获一个警告，大概长这样

 很明显，我们缺少一个 key 元素，key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。

简单修改一下，应该是这样：

 key 元素的存在提高了组件变化、比对的效率，合理使用 key 需要注意以下几点：

• 一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串,比如 id

• 元素的 key 只有放在就近的数组上下文中才有意义(简单来说，哪里循环在哪里定义 key )

• key 只是在兄弟节点之间必须唯一,它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值

三、受控组件

在 React 中，可变的状态一般都保存在 state 中，如果我们想要去改变这个状态，就要通过 setState 的方式进行更新。但是，用户可输入的表单元素会维持自身状态，根据用户输入进行更新，这样 就引出了 受控组件 的概念

受控组件的特点：

• 表单元素

• 由 React 渲染出来

• 由 React 控制值的改变，也就是说想要改变元素的值，只能通过 React 提供的方法来修改

<!-- 只读: 只能读取的input框 只展示 -->
<input value={this.state.data} readOnly></input>

<!--change事件-->
<input value={this.state.data} onChange={this.inputChange}></input>

<!-- defaultValue 非受控组件 -->
<input defaultValue={this.state.data}></input>

React提供了三种方式来处理表单元素

• 可以添加 readOnly 设置为只读

• 添加 change 事件，通过 setState 处理表单状态

• 设置 value 为 defaultValue 只执行第一次渲染