React 组件进阶props、组件通讯、跨级通信Context、props属性children、props校验、组件生命周期、render-props模式

一、组件的 props

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

我们往往需要的是一些动态显示的组件,换句话组件中所显示的内容必须是动态设置的。

在使用组件时,可以通过向组件传递参数的形式来向组件传递数据,这一点和JS中的函数非常相似。函数可以通过传递实参来决定函数的执行结果,组件也不例外。函数的参数如何传递我们是非常清楚的,那么组件的参数是怎么传递的呢?组件的参数需要通过属性传递,可以像这样向组件中传递参数:

<Button bgColor='red' color='white'>我是一个按钮</Button>

上边的案例中我们设置了两个属性,这些属性会被封装到一个对象中并作为参数传递给Button组件,只需要在Button组件中定义一个参数即可获取,通常这个参数我们会命名为props,像这样:

import './Button.css';
const Button = (props) => {
    return <button style={
    {
    backgroundColor:props.bgColor, 
    color:props.color
    }
    }>{props.children}</button>;
};export default Button;

在组件内部可以通过props.xxx来访问外部传递进的属性,从而达到动态设置的目的。需要注意的是,标签体也可以设置为props的一个属性,叫做children,
可以通过props.children来获取标签体的内容。

还有一点一定要记住,props中的属性是只读属性是无法修改的。

  • props的作用:接收传递给组件的数据
  • 传递数据:给组件标签添加属性
  • 接收数据:函数组件通过参数props接收数据,类组件通过 this.props 接收数据

类组件

类组件的props是存储到类的实例对象中,可以直接通过实例对象访问

this.props

在这里插入图片描述

类组件中state统一存储到了实例对象的state属性中
可以通过 this.state 来访问
通过this.setState()对其进行修改
当我们通过this.setState()修改state时,React只会修改设置了的属性,没有修改的不会舍弃
在这里插入图片描述
仅限于直接存储于state中的属性,修改obj需要展开
在这里插入图片描述

函数组件

在这里插入图片描述
例子:
在这里插入图片描述
在这里插入图片描述

组件props的特点

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

类组件

在这里插入图片描述

函数组件

在这里插入图片描述

二 、组件通讯的三种方式

组件之间的通讯分为 3 种:

  1. 父组件 -> 子组件
  2. 子组件 -> 父组件
  3. 兄弟组件

1.父组件传递数据给子组件

  • 父组件提供要传递的state数据
  • 给子组件标签添加属性,值为state中的数据
  • 子组件中通过props接收父组件中传递的数据
    在这里插入图片描述

2.子组件传递数据给父组件

思路:利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数。

  1. 父组件提供一个回调函数(用于接收数据)
  2. 将该函数作为属性的值,传递给子组件
  3. 子组件通过props调用回调函数
    在这里插入图片描述
    在这里插入图片描述

3. 兄弟组件

将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态

  • 思想:状态提升
  • 公共父组件职责:1. 提供共享状态 2. 提供操作共享状态的方法
  • 要通讯的子组件只需通过 props 接收状态或操作状态的方法

示例:

  • 定义布局结构,一个Counter里面包含两个子组件,一个是计数器的提示,一个是按钮
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>
        )
    }
}
  • 在父组件里定义共享状态,把这个状态传递给第一个子组件
class Counter extends React.Component {
    // 提供共享的状态
    state = {
        count: 0
    }
    render() {
        return (<div>
            {/* 把状态提供给第一个子组件 */}
            <Child1 count={this.state.count}/>
            <Child2 />
        </div>
        )
    }
}
  • 在第一个子组件里面就能通过props获取到
class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器:{this.props.count}</h1>
        )
    }
}
  • 在父组件中提供共享方法,通过属性传递给第二个子组件,方便第二个子组件来进行调用
    // 提供共享方法
    onIncrement = (res) => {
        // 只要第二个子组件调用了这个函数,就会执行里面代码
        this.setState({
            count: this.state.count + res
        })
    }
    render() {
        return (<div>
            ...
            {/* 把共享方法提供给第二个子组件 */}
            <Child2 onIncrement={this.onIncrement} />
        </div>
        )
    }
  • 在第二个子组件里面通过props来获取到对应函数,然后进行调用
class Child2 extends React.Component {
    handleClick = () => {
        // 这里一旦调用,就会执行父组件里面 onIncrement函数
        this.props.onIncrement(2)
    }
    render() {
        return (
            <button onClick={this.handleClick}>+</button>
        )
    }
}

在这里插入图片描述

三、Context

如果出现层级比较多的情况下(例如:爷爷传递数据给孙子),我们会使用Context来进行传递

作用: 跨组件传递数据
在这里插入图片描述

使用步骤

  1. 调用 React.createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件
const { Provider, Consumer } = React.createContext()
  1. 使用 Provider 组件作为父节点。
<Provider>
	<div className="App">
		<Child1 />
	</div>
</Provider>
  1. 设置 value 属性,表示要传递的数据。
<Provider value="pink">
  1. 调用 Consumer 组件接收数据。
    哪一层想要接收数据,就用Consumer进行包裹,在里面回调函数中的参数就是传递过来的值
<Consumer>
	{data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>

总结

  1. 如果两个组件是远方亲戚(比如,嵌套多层)可以使用Context实现组件通讯
  2. Context提供了两个组件:Provider 和 Consumer
  3. Provider组件:用来提供数据
  4. Consumer组件:用来消费数据

四、props进阶

1.children属性

props.children 表示组件的标签体

当组件有子节点时,组件的props就有一个children属性。

  • children属性: 表示组件标签的子节点,当组件标签有子节点时,props就会有该属性
  • children属性与普通的props一样,值可以使任意值(文本、react元素、组件)
  • 函数Functions are not valid as a React child. 函数子节点需要调用 而不是直接渲染
function Hello(props) {
	return (
		<div>
		组件的子节点:{props.children}
		</div>
	)
}
<Hello>我是子节点</Hello>

文本、react元素、组件子节点
在这里插入图片描述

在这里插入图片描述

函数子节点
在这里插入图片描述

2.props校验

  • 对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据,简单来说就是组件调用者可能不知道组件封装着需要什么样的数据
  • 如果传入的数据不对,可能会导致报错
  • 关键问题:组件的使用者不知道需要传递什么样的数据

例如:组件传参
在这里插入图片描述

  • props 校验:允许在创建组件的时候,就指定 props 的类型、格式等
  • 作用:捕获使用组件时因为props导致的错误,给出明确的错误提示,增加组件的健壮性
import PropTypes from 'prop-types'

App.propTypes = {
	colors: PropTypes.array
}

在这里插入图片描述
在这里插入图片描述

使用步骤

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

function App(props) {
  return (
    <h1>Hi, {props.colors}</h1>
  )
}
App.propTypes = {
  // 约定colors属性为array类型
  // 如果类型不对,则报出明确错误,便于分析错误原因
  colors: PropTypes.array
}

常见的约束规则

  • 创建的类型: array、bool、func、number、object、string
  • React元素类型:element
  • 必填项:isRequired
  • 特定结构的对象: shape({})
// 常见类型
optionalFunc: PropTypes.func,
// 必选
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
})

在这里插入图片描述

3.props 的默认值

  • 场景:分页组件 ->每页显示条数
  • 作用:给 props 设置默认值,在未传入 props 时生效
function App(props) {
return (
<div>
	此处展示props的默认值:{props.pageSize}
</div>
)
}
// 设置默认值
App.defaultProps = {
	pageSize: 10
}
// 不传入pageSize属性
<App />

五、组件的生命周期

1.组件的生命周期概述

意义:组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等

  • 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程
  • 生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数。
  • 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机。
  • 只有 类组件 才有生命周期。

2.生命周期的三个阶段

在这里插入图片描述

2.1 创建时(挂载阶段)

  • 执行时机:组件创建时(页面加载时)
  • 执行顺序:constructor()->render()->componentDidMount()

在这里插入图片描述

render中直接调用setState()会导致递归更新

在这里插入图片描述

在这里插入图片描述

2.2 更新时(更新阶段)

  • 执行时机:1. setState() 2. forceUpdate() 3. 组件接收到新的props
  • 说明:以上三者任意一种变化,组件就会重新渲染
  • 执行顺序:render()->componentDidUpdate()
    在这里插入图片描述

componentDidUpdate中直接调用setState()会导致递归更新。需要加if条件。

在这里插入图片描述
在这里插入图片描述

2.3 卸载时(卸载阶段)

  • 执行时机:组件从页面中消失
    componentWillUnmount 组件卸载(从页面中消失) 执行清理工作(比如:清理定时器等)

在这里插入图片描述

不常用钩子函数介绍

旧版生命周期钩子函数(知道):
在这里插入图片描述

新版完整生命周期钩子函数(知道)
在这里插入图片描述

六、render-props模式

1.React组件复用概述

  • 思考:如果两个组件中的部分功能相似或相同,该如何处理?
  • 处理方式:复用相似的功能(联想函数封装)
  • 复用什么?1. state 2. 操作state的方法 (组件状态逻辑 )
  • 两种方式:1. render props模式 2. 高阶组件(HOC)
  • 注意:这两种方式不是新的API,而是利用React自身特点的编码技巧,演化而成的固定模式(写法)

思路分析

  • 思路:将要复用的state和操作state的方法封装到一个组件中
  • 问题1:如何拿到该组件中复用的state?
    在使用组件时,添加一个值为函数的prop,通过 函数参数 来获取(需要组件内部实现)
<Mouse render={(mouse) => {}}/>
  • 问题2:如何渲染任意的UI?
    使用该函数的返回值作为要渲染的UI内容(需要组件内部实现)
<Mouse render={(mouse) => (
	<p>鼠标当前位置 {mouse.x}{mouse.y}</p>
)}/>

使用步骤

  1. 创建Mouse组件,在组件中提供复用的状态逻辑代码(1. 状态 2. 操作状态的方法)
  2. 将要复用的状态作为 props.render(state) 方法的参数,暴露到组件外部
  3. 使用 props.render() 的返回值作为要渲染的内容
class Mouse extends React.Component {
	// ... 省略state和操作state的方法
	render() {
		return this.props.render(this.state)
	}
}

<Mouse render={(mouse) => <p>鼠标当前位置 {mouse.x}{mouse.y}</p>}/>

作用:位置状态的复用
在这里插入图片描述

组件复用实现

Mouse组件 封装复用属性
在这里插入图片描述
组件复用渲染ui
在这里插入图片描述

2.children属性代替render属性

  • 注意:并不是该模式叫 render props 就必须使用名为render的prop,实际上可以使用任意名称的prop
  • 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做:render props模式
  • 推荐:使用 children 代替 render 属性
<Mouse>
	{({x, y}) => <p>鼠标的位置是 {x}{y}</p> }
</Mouse>

// 组件内部:
this.props.children(this.state)
// Context 中的用法:
<Consumer>
	{data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>

改造子节点
在这里插入图片描述在这里插入图片描述

3.代码优化

  1. 推荐:给 render props 模式添加 props校验
  2. 应该在组件卸载时解除 mousemove 事件绑定
import PropTypes from 'prop-types'

Mouse.propTypes = {
	chidlren: PropTypes.func.isRequired
}
componentWillUnmount() {
	window.removeEventListener('mousemove', this.handleMouseMove)
}

在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值