【React 基础四】组件基础之插槽与状态

本篇主要内容为 React 组件化基础，组件化基础共三篇，如下：

• 组件类型介绍和参数传递
• 组件插槽 slot 和组件状态（本篇）
• 组件生命周期函数和上下文

React - 插槽

插槽在 Vue 和 React 中的作用都相同：写在元素标签内部的代码，会被作为默认插槽，置放在你希望插入的地方

​

如果 Vue 使用的惯了，我们一定就习惯了使用 v-slot 为组件添加插槽
​

刚开始换到使用 React 时，我还纳闷许久怎么没有 slot API 呀？
​

这还搞个锤子！emmm 当然后来就是真香了。。
​

可以看到在 React 中是通过 props.children 属性获取到在调用组件时填充到组件标签内部内容的
​

​

React - 单向数据流

• 单向数据流实指 props 的数据流向
• 单向数据流的流动方向在 React 中是自顶向下，从父组件逐个向子组件依次顺序传递
• 单向数据流的特性要求我们把需要在多组件中共享的数据，只能放置在共同的上层组件中管理
• 单向数据流的特性要求我们在子级无法修改上层传递的数据，只能通过调用数据源所在组件的方法更改数据
• 单向数据流的特点造成了当数据发生变化时，React 需要自顶向下重新渲染组件树，以达到数据更新后重新渲染的目的
• 单向数据流能够使我们更便捷的定位数据错误导致的程序错误的位置，因为数据流动向是可预测的

React - 组件状态 State

组件的数据来源当然不止于通过 Props 接收外部传递进来的数据
​

每个组件还拥有自己的状态 State
​

State 在组件内可以被更新，且 State 被更新时，Dom 会相应更新触发页面的重新渲染
​

在类组件中组件内的状态数据 State 被统一存储在组件类的 state 属性中
​

但本篇将着重使用函数组件讲述 State 组件状态管理
​

既然是函数组件，那么我们就要使用 React Hooks 来创建状态和管理状态
​

示例如下：

// useState 是函数组件中定义组件状态的 Hook
import React, { useState } from "react"

const App = () => {
  // useState 接收一个默认值，返回一个状态数组
  // 数组内第一项为创建的状态值本身，第二项为该状态值的更新函数
  // 该状态值是不可直接进行修改的，若需修改更新必须使用更新函数
  // 如果不使用更新函数进行直接更改，Dom 将不会被更新，页面上显示的仍然是旧数据
	const [user, setUser] = useState({ name: "醒途" })
  
  // 更改 State 状态数据需要使用 setState 方法
  const nameClick = () => setUser({ name: "帅比" })
  
  return <div onClick={nameClick}>{user.name}</div>
}

React - 状态数据的双向绑定

在 Vue 中我们可以直接使用 v-bind 绑定一个数据变量，这样数据状态更新时 Dom 状态会被同步更新，Dom 状态更新时，数据状态值也会被同步更新，我们称这种行为叫双向绑定
​

在 React 中则没有 v-bind 这种 API，实现起来也并不是一次到位，需要指定数据和更新数据两个步骤才可以实现，示例如下：

const App = () => {
	const [name, setName] = useState("")
  
  const nameChange = event => setName(event.target.value)
  
  return <input type="text" value={name} onChange={nameChange} />
}

这种实现方法也是刚起步使用 React 时心里痒痒的挺闹腾的感觉，没有 v-bind 一步到位那样爽快
​

好了，今天的 React 基础介绍就到这里
​

本篇为 React 系列第 3 篇

vx👦:mmm7nnn

公号🐓：醒途

邮箱📧：suanzao@wacai.com（欢迎找我内推）

如果喜欢这个系列请给我一个点赞👍或者一个关注➕，诸君的支持是我创作的最大的动力