React基础（二）

前言

前一篇 React基础(一) 简单地了解了 React 的一些基本知识点，怎么搭建一个简单的 React 项目、怎么建立 React 元素、组件以及怎么给项目添加样式这些基础功能。下面，在经过一些示例来了解 React 中的事件处理、条件渲染、列表处理等功能

若是文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

如下↓

Round 1 事件处理

首先，咱们看一下怎么给元素绑定事件

React 事件的命名采用小驼峰式

<button onClick={ function() { console.log('事件触发了')} }>点我这里</button>

onClick 后面能够直接是一个函数或者函数名

在这里咱们须要注意的是

在 React 中另外一个不一样点是你不能经过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault

<a href="#" onClick={function(e){e.preventDefault();console.log('事件触发了')}}>
  Click me
</a>

在咱们没有添加 e.preventDefault() 以前，很明显看到了页面的刷新，阻止默认行为以后就不会再出现那种状况了

return false 也是没有效果的

Round 2 setState

在以前一篇文章中，咱们大概知道了能够经过 state 去管理组件内部的数据，那么应该怎么正确地使用它呢、或者说咱们怎么经过 state 去修改组件内部的数据

• 首先，不要直接去修改 state

this.state.age = 18 // 这是错误的

在 React 中咱们经过 setState() 去修改数据，这个和小程序的修改数据方式有点相似

this.setState({age: 18})

经过一个点击事件再来感觉一下 setState()

细心地小伙伴可能发现了 这么一行代码：

this.addAge = this.addAge.bind(this)

这一步的做用其实就是给这个方法绑定 this ，在 JavaScript 中，class 的方法默认不会绑定 this ，若是咱们没有这一步操做，那么 this 的值就会是 undefined

还有两种方式去解决这个问题：

public class fields 语法

这里须要注意的一点，若是咱们要使用这个语法，那么你的 babel 版本必须是 7.x 以上，相应的 babel-loader 必须是 8.x 以上版本，不然会报错 具体配置能够 参考这里

使用箭头函数

箭头函数默认绑定定义时的 this

Round 3 条件渲染

不少时候，用户可能会有多种操做需求，这个时候就须要咱们对不一样的操做选择不一样的执行逻辑

在 React 中，你能够建立不一样的组件来封装各类你须要的行为

React 中的条件渲染和 JavaScript 中的同样，使用 JavaScript 运算符 if 或者条件运算符去建立元素来表现当前的状态，而后让 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>

具体 Demo 能够 参考这里 main-3.js

Round 4 循环处理

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

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

咱们作一个 li 元素的遍历效果

const numbers = [1, 2, 3, 4, 5]

function NumberList(props) {
    let numbers = props.numbers
    let numberLists = numbers.map(res => <li>{ res }</li>)
    return ( <ul>{ numberLists }</ul> )
}
ReactDom.render(<NumberList numbers={ numbers } />, document.getElementById('app'))

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

彻底按照上面的方式建立 ul li 元素，毫无悬念咱们会收获一个警告，大概长这样

很明显，咱们缺乏一个 key 元素

key 帮助 React 识别哪些元素改变了，好比被添加或删除。所以你应当给数组中的每个元素赋予一个肯定的标识

简单修改一下应该是这样的

let numberLists = numbers.map(res => <li key={res.toString()}>{ res }</li>)

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

• 一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串,好比 id
• 元素的 key 只有放在就近的数组上下文中才有意义(简单来讲，哪里循环在哪里定义 key )
• key 只是在兄弟节点之间必须惟一,它们不须要是全局惟一的。当咱们生成两个不一样的数组时，咱们可使用相同的 key 值

Round 5 受控组件

在 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 只执行第一次渲染

后记

以上就是 React 中一部分基础概念，有兴趣的小伙伴能够 点击这里 查看完整示例 Demo

感兴趣的小伙伴能够 点击这里 了解更多前端片断，欢迎关注 star