React基础知识点总结--3️⃣

最新推荐文章于 2024-06-26 21:38:19 发布

舒克啊

最新推荐文章于 2024-06-26 21:38:19 发布

阅读量145

点赞数

分类专栏：前端知识学习文章标签： react.js javascript

本文链接：https://blog.csdn.net/Slamande/article/details/120497266

版权

前端知识学习专栏收录该内容

15 篇文章 1 订阅

订阅专栏

四、React组件进阶

目标

◆ 能够使用props接收数据
◆ 能够实现父子组件之间的通讯
◆ 能够实现兄弟组件之间的通讯
◆ 能够给组件添加props校验
◆ 能够说出生命周期常用的钩子函数
◆ 能够知道高阶组件的作用

1. 组件通讯介绍

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

2. 组件的props

● 组件是封闭的 ,要接收外部数据应该通过props来实现
● props的作用:接收传递给组件的数据
● 传递数据 :给组件标签添加属性
● 接收数据 :函数组件通过参数props接收数据,类组件通过this.props接收数据

import React from 'react';
import ReactDOM from 'react-dom';

// 2.接受数据 类
class Hello extends React.Component{
  render(){
    return (
      <div>
        <h1>props:{this.props.age}</h1>
      </div>
    )
  }
}

// 2. 接受数据
// const Hello = props=>{
//   console.log(props);
//   return(
//     <div>
//       <h1>props:{props.name}</h1>
//     </div>
//   )
// }
// 1.传递数据
ReactDOM.render(<Hello name="jack" age={19}/>,document.getElementById('root'))

特点：

可以给组件传递任意类型的数据

ReactDOM.render(
<Hello
  name="jack"
  age={19}
  colors={['red','green','blue']}
  fn={() => console.log('这是一个函数')}
  tag={<p>这是一个p标签</p>}
  />,
  document.getElementById('root')
)

props 只读的对象,只能读取属性的值,无法修改对象

注意:使用类组件时,如果写了构造函数,应该将props传递给super( ),否则,无法在构造函数中获取到props !

class Hello extends React.Component{
    //推荐使用props作为constructor的参数!!!
  constructor(props){
    super(props)
    console.log('constructor:',this.props);
  }
}

3. 组件通讯的三种方式

3.1 父传子

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

class Parent extends React.Component{
  state={
    lastName:'张'
  }
  render(){
    return(
      <div><Child lastName={this.state.lastName}/></div>
    )
  }
}
const Child=props=>{
  console.log(props);
  return(
    <div><p>{props.lastName}</p></div>
  )
}
ReactDOM.render(<Parent/>,document.getElementById('root'))

3.2 子传父

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

父组件提供一个回调函数(用于接收数据)
将该函数作为属性的值,传递给子组件
子组件通过props调用回调函数
将子组件的数据作为参数传递给回调函数

class Parent extends React.Component{
  state={
    parentMsg: ''
  }
  //接受函数 父组件不调用 只让子组件调用
  getChildMsg=msg=>{
    console.log('子组件传递过来的数据：',msg);
    this.setState({
      parentMsg: msg
    })
  }
  render(){
    return(
      <div>父组件：{this.state.parentMsg}
        <Child getMsg={this.getChildMsg}/>
      </div>
    )
  }
}
class Child extends React.Component{
  state={
    msg: '爱你爱你擦浪嘿'
  }
  handleClick=()=>{
    //通过props方法拿到父组件传递过来的函数 并将参数传过去
    this.props.getMsg(this.state.msg)
  }
  render(){
    return (
      <div>子组件：<button onClick={this.handleClick}>点击按钮 给父组件传递数据</button></div>
    )
 }
}
ReactDOM.render(<Parent/>,document.getElementById('root'))

注意：回调函数中 this 指向的问题

3.3 兄弟组件

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

● 思想:状态提升

● 公共父组件职责: 1.提供共享状态2.提供操作共享状态的方法

● 要通讯的子组件只需通过 props接收状态或操作状态的方法

class Parent extends React.Component{
  //状态 是组件私有的东西
  state={
    count:0
  }
  onAdd=()=>{
    this.setState({
      count:this.state.count + 1
    })
  }
  render(){
    return(
      <div>
        <Child1 count={this.state.count}/>
        <Child2 onAdd={this.onAdd}/>
      </div>
    )
  }
}
const Child1= props =>{
  return <p>计数器：{props.count}</p>
}
const Child2= props =>{
  return <button onClick={props.onAdd}>+1</button>
}
ReactDOM.render(<Parent/>,document.getElementById('root'))

4. Context

思考: App组件要传递数据给Child组件,该如何处理?

● 处理方式:使用props一层层组件往下传递(繁琐)

● 更好的姿势:使用Context

● 作用: 跨组件传递数据(比如:主题、语言等)

使用步骤:

调用React. createContext()创建Provider (提供数据)和Consumer (消费数据)两个组件。
```
const { Provider, Consumer } = React.createContext ()
```

使用Provider 组件作为父节点。

<Provider>
  <div className="App">
    <Child />
  </div>
</Provider>

设置value属性,表示要传递的数据。(最上层父组件中)
```
<Provider value="pink"></Provider>
```

调用Consumer组件接收数据。(最下层Child组件中)

<Consumer>
	{data => <span>data参数表示接收到的数据 -- {data}</ span> }
</Consumer>

const { Provider, Consumer } = React.createContext()
class App extends React.Component {
  render() {
    return (
      <Provider value="pink">
        <div className="app">
          <Node />
        </div>
      </Provider>
    )
  }
}
const Node = props => {
  return (
    <div className="node">
      <SubNode />
    </div>
  )
}
const SubNode = props => {
  return (
    <div className="subnode">
      <Child />
    </div>
  )
}
const Child = props => {
  return (
    <div className="child">
      <Consumer>{data => <span>我是子 节点-- {data}</span>}</Consumer>
    </div>
  )
}
ReactDOM.render(<App/>,document.getElementById('root'))

总结:

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

5. props深入

5.1 children属性

● children属性: 表示组件标签的子节点。当组件标签有子节点时, props就会有该children属性

● children 属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)

5.2 props校验

● 对于组件来说 , props是外来的,无法保证组件使用者传入什么格式的数据
● 如果传入的数据格式不对 ,可能会导致组件内部报错
● 关键问题: 组件的使用者不知道明确的错误原因

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

App.propTypes = {
	colors: propTypes.array
}

使用步骤

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

约束规则

常见类型: array、 bool、 func、 number、 object、 string
React元素类型 : element
必填项: isRequired
特定结构的对象: shape({ })

5.3 props的默认值

● 场景: 分页组件→每领显示条数

● 作用:给props设置默认值,在未传入props时生效

6. 组件的生命周期

6.1组件的生命周期概述

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

● 组件的生命周期:组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程

● 生命周期的每个阶段总是伴随着一些方法调用,这些方法就是生命周期的钩子函数

● 钩子函数的作用:为开发人员在不同阶段操作组件提供了时机

● 只有类组件才有生命周期

6.2生命周期的三个阶段

创建时(挂载阶段)
● 执行时机:组件创建时(页面加载时)
● 执行顺序:constructor() → render() → componentDidMount ()
更新时(更新阶段)

● 执行时机: 1. setState() 2. forceUpdate()(很少用到) 3. 组件接收到新的props

● 说明:以上三者任意一种变化,组件就会重新渲染

● 执行顺序：

render() → componentDidUpdate()
卸载时(卸载阶段)
● 执行时机:组件从页面中消失

6.3 不常用钩子函数介绍

新版完整生命周期钩子函数(知道) :

7. render-props和高阶组件

7.1 React组件复用概述

● 思考: 如果两个组件中的部分功能相似或相同,该如何处理?

● 处理方式: 复用相似的功能(联想函数封装)

● 复用什么? 1. **state ** 2.操作state的方法(组件状态逻辑)

● 两种方式: 1. render props模式 2.高阶组件( HOC )

● 注意: 这两种方式不是新的API ,而是利用React自身特点的编码技巧,演化而成的固定模式(写法)

7.2 render props模式

思路分析

● 思路: 将要复用的state和操作state的方法封装到一个组件中

● 问题1 :如何拿到该组件中复用的state ?

● 在使用组件时,添加一个值为函数的prop ,通过函数参数来获取(需要组件内部实现)

<Mouse render={(mouse) =>{}}/>

● 问题2 :如何渲染任意的UI ?

● 使用该函数的返回值作为要渲染的UI内容 (需要组件内部实现)

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

使用步骤

创建Mouse组件,在组件中提供复用的状态逻辑代码( 1.状态2.操作状态的方法)
将要复用的状态作为props.render(state)方法的参数,暴露到组件外部

使用props.render()的返回值作为要渲染的内容

class Mouse extends React.Component{
  state = {
    x:0,
    y:0
  }
  handleMouseMove=e=>{
    this.setState({
      x:e.clientX,
      y:e.clientY
    })
  }
  componentDidMount(){
    window.addEventListener('mousemove',this.handleMouseMove)
  }
  render(){
    // return null
    return this.props.render(this.state)
  }
}
class App extends React.Component{
  render(){
    return(
      <div>
        <h1>render props模式</h1>
        <Mouse render={(mouse)=>{
          return(
            <p>鼠标位置：{mouse.x} {mouse.y}</p>
          )
        }}/>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

演示Mouse组件的复用
● Mouse组件负责 :封装复用的状态逻辑代码(1.状态2. 操作状态的方法)
● 状态:鼠标坐标(x,y )
● 操作状态的方法 :鼠标移动事件
● 传入的render prop负责:使用复用的状态来渲染UI结构

import img from './image/cat.jpg'
<Mouse render={(mouse)=>{
        return(
            <p>鼠标位置：{mouse.x} {mouse.y}</p>
        )
    }}/>
<Mouse render={mouse=>{
        return (
            <img
                src={img}
                alt="miao"
                style={{
                    position:'absolute',
                    top:mouse.y-28,
                    left:mouse.x-28,
                }}
                width='10%'
                />
        )
    }}/>

children代替render属性
● 注意: 并不是该模式叫render props就必须使用名为render的prop ,实际上可以使用任意名称的prop
● 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做 : render props模式
● 推荐:使用children代替render属性

代码优化

推荐:给render props模式添加props校验
应该在组件卸载时解除mousemove事件绑定

7.3高阶组件

概述

● 目的: 实现状态逻辑复用

● 采用包装(装饰)模式,比如说:手机壳

● 手机: 获取保护功能

● 手机壳:提供保护功能

● 高阶组件就相当于手机壳,通过包装组件,增强组件功能

思路分析

● 高阶组件 ( HOC , Higher-Order Component )是一个函数,接收要包装的组件,返回增强后的组件

● 高阶组件内部创建一个类组件 ,在这个类组件中提供复用的状态逻辑代码,通过prop将复用的状态传递给被包装组件WrappedComponent

使用步骤

创建-一个函数,名称约定以with开头
指定函数参数,参数应该以大写字母开头(作为要渲染的组件)
在函数内部创建一个类组件 ,提供复用的状态逻辑代码,并返回
在该组件中,渲染参数组件,同时将状态通过prop传递给参数组件
调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中

//创建高阶组件
function withMouse(WrappedComponent){
  //该组件提供复用的状态逻辑
  class Mouse extends React.Component{

  }
  return Mouse
}
//基本框架

//创建高阶组件
function withMouse(WrappedComponent){
  //该组件提供复用的状态逻辑
  class Mouse extends React.Component{
    state = {
      x:0,
      y:0
    }
    handleMouseMove=e=>{
      this.setState({
        x:e.clientX,
        y:e.clientY
      })
    }
    componentDidMount(){
      window.addEventListener('mousemove',this.handleMouseMove)
    }
    componentWillUnmount(){
      window.removeEventListener('mousemove',this.handleMouseMove)
    }
    render() {
      return <WrappedComponent {...this.state}></WrappedComponent>
    }
  }
//区分组件名字
  Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
  return Mouse
}
//区分组件名字
function getDisplayName(WrappedComponent){
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

const Position = props => (
  <p>
    鼠标当前位置:(x:{props.x},y:{props.y})
  </p>
)
const Cat = props => (
  <img
    src={img}
    alt="miao"
    style={{
      position:'absolute',
      top:props.y-28,
      left:props.x-28,
    }}
    width='10%'
  />
)
//获取 增强后的组件	
const MousePosition = withMouse(Position)
const MouseCat = withMouse(Cat)
class App extends React.Component{
  render(){
    return(
      <div>
        <h1>高阶组件</h1>
        <MousePosition/>
        <MouseCat/>
      </div>
    )
  }
}
ReactDOM.render(<App/>,document.getElementById('root'))

设置displayName

● 使用高阶组件存在的问题 :得到的两个组件名称相同
● 原因: 默认情况下, React使用组件名称作为displayName
● 解决方式: 为高阶组件设置displayName便于调试时区分不同的组件
● displayName的作用 :用于设置调试信息( React Developer Tools信息)

传递props

● 问题: props丢失

● 原因: 高阶组件没有往下传递props

● 解决方式:渲染WrappedComponent时,将state和this.props -起传递给组件

● 传递方式:

<WrappedComponent {...this.state} {...this.props} />

我们在class App中渲染组件给组件添加标签时，<MousePosition a="1"/>,若只添加给高阶组件而不往下传，就会组件丢失，需要在高阶组件class Mouse中渲染时传递props{...this.props}

8.总结–React组件进阶

组件通讯是构建React应用必不可少的一环。
props 的灵活性让组件更加强大。
状态提升是React组件的常用模式。
组件生命周期有助于理解组件的运行过程。
钩子函数让开发者可以在特定的时机执行某些功能。
render props模式和高阶组件都可以实现组件状态逻辑复用。
组件极简模型: (state, props) => UI

舒克啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录