react基础Day02-受控组件&评论案例&props&context

React 组件

目标

  • 能够知道受控组件是什么
  • 能够写出受控组件
  • 了解非受控组件

表单处理

受控组件（★★★）

  • HTML 中的表单元素是可输入的，也就是有自己的可变状态
  • 而 React 中可变状态通常保存在 state 中，并且只能通过setState() 方法来修改
  • React 讲 state 与表单元素值 value 绑定在一起，有 state 的值来控制表单元素的值
  • 受控组件：值受到 react 控制的表单元素

使用步骤

  • 在 state 中添加一个状态，作为表单元素的 value 值
  • 给表单元素绑定 change 事件，将表单元素的值设置为 state 的值

示例 demo

plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class App extends React.Component {
    constructor(){
        super()
        this.inputChange = this.inputChange.bind(this)
    }
    state = {
        txt : ''
    }
    inputChange(e){
       this.setState({
           txt: e.target.value
       })
    }
    render(){
        console.log(this.state);

        return (
            <div>
                {/* 把state的值设置给输入框的value，绑定change事件，这样用户在输入内容的时候调用相应函数，在函数里面把当前设置的值赋值给state，从而达到数据的统一 */}
                <input type="text" value={this.state.txt} onChange={this.inputChange}/>
            </div>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

多表单元素优化

  • 问题：每个表单元素都有一个单独的事件处理函数，这样太繁琐
  • 优化：使用一个事件处理程序同时处理多个表单元素
步骤
  • 给表单元素添加 name 属性（用来区分是哪一个表单），名称与 state 相同（用来更新数据的）
  • 根据表单内容来获取对应值
  • 在 change 事件处理程序中通过 [name] 来修改对应的 state
示例 demo
plaintext
1
2
3
4
5
6
7
8
9
inputChange(e){
   let target = e.target;
   let value = target.type == 'checkbox' ? target.checked : target.value;
   this.setState({
       [e.target.name]: value
   })
}
<input type="text" value={this.state.txt} name="txt" onChange={this.inputChange}/>
<input type="checkbox" value={this.state.isChecked} name="isChecked" onChange={this.inputChange}/>

非受控组件 （了解）

  • 说明：借助于 ref，使用元素 DOM 方式获取表单元素值
  • ref 的作用：获取 DOM 或者组件

使用步骤

  • 调用 React.createRef() 方法创建 ref 对象
  • 将创建好的 ref 对象添加到文本框中
  • 通过 ref 对象获取到文本框的值
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class App extends React.Component {
    constructor(){
        super()

        //创建 ref
        this.txtRef = React.createRef()
    }
    // 获取文本框的值
    getTxt =() => {
        console.log(this.txtRef.current.value)
    }
    render(){
        return (
          <div>
            <input type ="text" ref={this.txtRef} />
            <button onClick ={this.getTxt}>获取值</button>
          </div>
        )
    }
}

React 组件综合案例（★★★）

需求分析

  • 渲染评论列表（列表渲染）
  • 没有评论数据时渲染：暂无评论（条件渲染）
  • 获取评论信息，包括评论人和评论内容（受控组件）
  • 发表评论，更新评论列表（setState()）

搭建评论列表的模板

  • 结构
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React from 'react'
import ReactDOM from 'react-dom'

/*
  评论列表案例

  comments: [
    { id: 1, name: 'jack', content: '沙发！！！' },
    { id: 2, name: 'rose', content: '板凳~' },
    { id: 3, name: 'tom', content: '楼主好人' }
  ]
*/

import './index.css'

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <div>
          <input className="user" type="text" placeholder="请输入评论人" />
          <br />
          <textarea
            className="content"
            cols="30"
            rows="10"
            placeholder="请输入评论内容"
          />
          <br />
          <button>发表评论</button>
        </div>

        <div className="no-comment">暂无评论，快去评论吧~</div>
        <ul>
          <li>
            <h3>评论人：jack</h3>
            <p>评论内容：沙发！！！</p>
          </li>
        </ul>
      </div>
    )
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))
  • 样式
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.app {
  width: 300px;
  padding: 10px;
  border: 1px solid #999;
}

.user {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.content {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.no-comment {
  text-align: center;
  margin-top: 30px;
}

渲染评论列表

  • 在 state 中初始化评论列表数据
plaintext
1
2
3
4
5
6
7
state = {
  comments: [
    { id: 1, name: 'jack', content: '沙发！！！' },
    { id: 2, name: 'rose', content: '板凳~' },
    { id: 3, name: 'tom', content: '楼主好人' }
  ]
}
  • 使用数组的 map 方法遍历 state 中的列表数据
  • 给每一个被遍历的 li 元素添加 key 属性
  • 在 render 方法里的 ul 节点下嵌入表达式
plaintext
1
2
3
4
5
6
7
8
9
10
{
  this.state.comments.map(item => {
    return (
       <li key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.content}</p>
       </li>
    )
  })
}

渲染暂无评论

  • 判断列表数据的长度是否为 0

  • 如果为 0，则渲染暂无评论

  • 如果不为 0，那么渲染列表数据

  • 在 jsx 中大量写逻辑会导致很臃肿，所以我们可以把条件渲染的逻辑抽取成一个函数

plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * 条件渲染，这里抽取出来了，这样在结构中不会很混乱
 */
renderList(){
  if (this.state.comments.length === 0) {
    return (<div className="no-comment">暂无评论，快去评论吧~</div>)
  } else {
    return (
      <ul> {
        this.state.comments.map(item => {
          return (
            <li key={item.id}>
              <h3>{item.name}</h3>
              <p>{item.content}</p>
            </li>
          )
        })
      }
      </ul>
    )
  }
}
  • 在 render 的 return 方法里面调用这个函数即可
plaintext
1
2
3
4
5
6
7
8
9
render() {
  return (
    <div>
      ...
      {/* 通过条件渲染来判断是否显示暂无评论 */}
      {this.renderList()}
    </div>
  )
}

获取评论信息

  • 通过受控组件来获取内容
  • 初始化用户名和用户内容的 state
plaintext
1
2
userName: '',
userContent: ''
  • 在结构中，把表单元素的 value 与 state 进行绑定，还需要绑定 name 属性和 onChange 属性
plaintext
1
2
3
4
5
6
7
8
9
10
11
<input className="user" type="text" placeholder="请输入评论人" value={this.state.userName} name="userName" onChange={this.handleForm}/>
<br />
<textarea
  className="content"
  cols="30"
  rows="10"
  placeholder="请输入评论内容"
  value={this.state.userContent}
  name="userContent"
  onChange={this.handleForm}
/>
  • 在handleFrom函数中利用setState来让数据保持一致
plaintext
1
2
3
4
5
handleForm = (e) => {
   this.setState({
     [e.target.name] : e.target.value
   })
}

发表评论

  • 给按钮绑定事件
  • 在事件处理程序中，通过 state 获取评论信息
  • 将评论信息添加到 state 中，利用 setState 来更新页面
  • 添加评论前需要判断用户是否输入内容
  • 添加评论后，需要情况文本框用户输入的值
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
handleClick = (e) => {
  // 拿到用户输入的内容
  let {userName,userContent} = this.state
  if(userName.trim()==='' || userContent.trim() === ''){
      alert('请输入内容')
      return
  }
  // 利用数组拓展运算符来进行数据的拼接，把用户输入的存放在数组的第一个位置
  let newComments = [{
    id: this.state.comments.length+1,
    name: userName,
    content: userContent
  },...this.state.comments]
  this.setState({
    comments: newComments,
    userName:'',
    userContent: ''
  })
}

React 组件进阶

目标

  • 能够使用 props 接收数据
  • 能够实现父子组件之间的通讯
  • 能够实现兄弟组件之间的通讯
  • 能够给组件添加 props 校验

组件通讯介绍

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这个过程就是组件通讯

组件的 props（★★★）

基本使用

  • 组件时封闭的，要接受外部数据应该通过 props 来实现
  • props 的作用：接收传递给组件的数据
  • 传递数据：给组件标签添加属性

  • 接收数据：函数组件通过 参数 props 接收数据，类组件通过 this.props 接收数据

    • 函数组件获取

    • 类组件获取

​

特点

  • 可以给组件传递任意类型的数据
  • props 是只读属性，不能对值进行修改
  • 注意：使用类组件时，如果写了构造函数，应该将 props 传递给 super(),否则，无法在构造函数中获取到 props，其他的地方是可以拿到的

组件通讯的三种方式（★★★）

父组件传递数据给子组件

  • 父组件提供要传递的 state 数据
  • 给子组件标签添加属性，值为 state 中的数据
  • 子组件中通过 props 接收父组件中传递的数据

子组件传递数据给父组件

  • 利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
  • 父组件提供一个回调函数，用来接收数据
  • 将该函数作为属性的值，传递给子组件

  • 子组件通过 props 调用回调函数

兄弟组件传递

  • 将共享状态(数据)提升到最近的公共父组件中，由公共父组件管理这个状态
  • 这个称为状态提升
  • 公共父组件职责：1. 提供共享状态 2.提供操作共享状态的方法
  • 要通讯的子组件只需要通过 props 接收状态或操作状态的方法

示例 demo

  • 定义布局结构，一个 Counter 里面包含两个子组件，一个是计数器的提示，一个是按钮
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class Counter extends React.Component {
    render() {
        return (<div>
            <Child1 />
            <Child2 />
        </div>
        )
    }
}
class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器：</h1>
        )
    }
}
class Child2 extends React.Component {
    render() {
        return (
            <button>+1</button>
        )
    }
}
  • 在父组件里定义共享状态，把这个状态传递给第一个子组件
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Counter extends React.Component {
    // 提供共享的状态
    state = {
        count: 0
    }
    render() {
        return (<div>
            {/* 把状态提供给第一个子组件 */}
            <Child1 count={this.state.count}/>
            <Child2 />
        </div>
        )
    }
}
  • 在第一个子组件里面就能通过 props 获取到
plaintext
1
2
3
4
5
6
7
class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器：{this.props.count}</h1>
        )
    }
}
  • 在父组件中提供共享方法，通过属性传递给第二个子组件，方便第二个子组件来进行调用
plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 提供共享方法
onIncrement = (res) => {
    // 只要第二个子组件调用了这个函数，就会执行里面代码
    this.setState({
        count: this.state.count + res
    })
}
render() {
    return (<div>
        ...
        {/* 把共享方法提供给第二个子组件 */}
        <Child2 onIncrement={this.onIncrement} />
    </div>
    )
}
  • 在第二个子组件里面通过 props 来获取到对应函数，然后进行调用
plaintext
1
2
3
4
5
6
7
8
9
10
11
class Child2 extends React.Component {
    handleClick = () => {
        // 这里一旦调用，就会执行父组件里面 onIncrement函数
        this.props.onIncrement(2)
    }
    render() {
        return (
            <button onClick={this.handleClick}>+</button>
        )
    }
}

Context（★★★）

如果出现层级比较多的情况下（例如：爷爷传递数据给孙子），我们会使用 Context 来进行传递

作用： 跨组件传递数据

使用步骤

  • 调用 React.createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件

  • 使用 Provider 组件作为父节点

  • 设置 value 属性，表示要传递的数据

  • 哪一层想要接收数据，就用 Consumer 进行包裹，在里面回调函数中的参数就是传递过来的值

小结

  • 如果两个组件相隔层级比较多，可以使用 Context 实现组件通讯
  • Context 提供了两个组件：Provider 和 Consumer
  • Provider 组件： 用来提供数据
  • Consumer 组件： 用来消费数据

props 进阶

children 属性

  • children 属性： 表示组件标签的子节点，当组件标签有子节点时，props 就会有该属性
  • children 属性与普通的 props 一样，值可以使任意值（文本、react 元素、组件、甚至是函数）

props 校验（★★★）

  • 对于组件来说，props 是外来的，无法保证组件使用者传入什么格式的数据，简单来说就是组件调用者可能不知道组件封装着需要什么样的数据
  • 如果传入的数据不对，可能会导致报错
  • 关键问题：组件的使用者不知道需要传递什么样的数据
  • props 校验：允许在创建组件的时候，指定 props 的类型、格式等

  • 作用：捕获使用组件时因为 props 导致的错误，给出明确的错误提示，增加组件的健壮性

使用步骤

  • 安装包 prop-types (yarn add prop-types | npm i props-types)
  • 导入 prop-types 包
  • 使用组件名.propTypes={} 来给组件的 props 添加校验规则
  • 校验规则通过 PropTypes 对象来指定

常见的约束规则

  • 创建的类型： array、bool、func、number、object、string
  • React 元素类型：element
  • 必填项：isRequired
  • 特定结构的对象： shape({})
  • 更多的约束规则

props 的默认值

  • 场景：分页组件 -> 每页显示条数