react高阶组件和Hooks语法

高阶组件：本质是一个函数，返回值是一个组件，函数的参数是原生组件，主要是对组件的代码的复用或者是逻辑上的复用，
以及对原始组件上的props和state进行增删改查的操作，也可以对原生组件的进行增强和优化;

高阶组件大致分为两种：

1.主要操作的是props对象和组件的增强

import React, { Component } from 'react';function MyHoc(OldCom) {return class NewCom extends Component {constructor(props) {super(props);this.state = {height: 170}}render() {console.log(this.state, this.props);this.newPorps = {   //创建一个新的props传递到old组件...this.props,happly: "睡觉",sex: "男",height: this.state.height}// delete  删除传递属性;delete this.newPorps.age;// 修改this.newPorps.sex = "女";return (<div><div>我是高阶组件</div>  //可以额外加入新的组件与元素{/* 用绑定语法写成对象展开符 */}<OldCom {...this.newPorps} ></OldCom>  //将新的props传递到oldCom中;</div>);}}}
export default MyHoc;

2 反向继承；
在高阶组件实现新组件新建继承与原始组件,主要是对原始组件的state进行操作,页面增强优化;

function MyHoc2(OldCom) {// 反向继承return class NewCom extends OldCom {// 反向继承对原始组件的state进行操作,进行修改的时候,在componentDidMount生命周期进行修改;// 重写父类生命周期函数;componentDidMount() {this.setState({name: "hello"})}render() {console.log(super.console1());// 渲染劫持:可以通过高阶组件对原始组件的状态和页面模板重新渲染,如果不想渲染一个新的组件,可以直接 return null 不进行渲染, 渲染劫持一般使用在// 需要判断的场景,var isLogin = true;if (isLogin) {// 直接渲染父组件;调用super.render函数进行渲染父组件;return super.render()} else {// 渲染登陆页面return null}}}}export default MyHoc2;

Hooks语法

主要是为了函数式组件提供生命周期和组件状态;通过useState,模拟状态useEffect模拟生命周期函数;

import React, { useState, useEffect } from 'react';// hooks:主要是为了函数式组件提供生命周期和组件状态;通过useState,模拟状态useEffect模拟生命周期函数; export default function User() {console.log(this);  //函数是一个纯函数,为了this指向避免recat指向的问题才会用函数式组件;const [name, setName] = useState("宫本武藏"); //name 就是状态名,返回的是一个数组 参数一状态的初始值,第二个参数可以不穿;const [age, setAge] = useState(200);let a = 3;// 通过useEffect() 模拟生命周期函数,// 参数一是一个回调函数 参数二 不传;useEffect(() => {console.log("组件初始化的时候调用,或者有任何状态更新的时候调用didmout/updated");})//情况2 参数1 :回调函数, 参数二 空数组;useEffect(() => {console.log("组件初始化的时候调用一次,模拟/didmount生命周期");}, [])// 情况三 参数一回调,参数二 指定数据更新的时候触发[name];useEffect(() => {console.log("组件初始化的时候调用一次,只有name状态发生改变的时候触发该函数");}, [name])return (<div>{a}<p>name:{name}</p><p>age:{age}</p><button onClick={() => setName(a++)}>点击报错</button><button onClick={() => setAge(a++)}>asdf</button></div >)
}

react高阶组件和Hooks语法相关推荐

react高阶组件和hooks
1. react高阶组件 1.1 高阶组件的概念高阶组件(Higher Order Component,简称:HOC ): 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组 ...
react高阶组件、hooks
1.高阶组件 1.1概念高阶组件(简称:HOC):是react中用于重用组件逻辑的高级技术,它本身不是react中的组件,而是一个函数.这个函数接受一个react组件作为参数,并返回一个新组件,实现 ...
「react进阶」一文吃透React高阶组件(HOC)
一前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
React高阶组件探究
React高阶组件探究在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...
React高阶组件实践
前言 React高阶组件,即 Higher-Order Component,其官方解释是: A higher-order component is a function that takes a co ...
react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
[react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度缺点组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
react组件类型及深入理解react高阶组件
React中常见的组件类型及分类: 1.展示组件(Presentational component) 与容器组件(Container component) 2.类组件(Class component ...

react高阶组件和Hooks语法

react高阶组件和Hooks语法相关推荐

最新文章

热门文章