![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
汉武大帝·
我是攻城狮
展开
-
react生命周期
中文版:英文版:react组件有class组件和函数组件, 生命周期在class组件中才有,下面说一下生命周期:(常用的生命周期会加粗标红)挂载时: 生命周期调用顺序如下:1,constructor():2,static getDerivedStateFromProps():3,render()4,componentDidMount()更新时: 生命周期调用顺序如下:1,static getDerivedStateFromProps()2, render().原创 2022-01-24 15:11:04 · 469 阅读 · 0 评论 -
react 中的 Portals
Portals 提供了一个最好的 在 父组件包含的DOM结构层级 外的 DOM节点 渲染组件 的方法;语法:ReactDOM.createPortal(child, container);第一个参数child是:可渲染的react子项,比如元素、字符串....., 第二个参数是一个dom元素React Portal 提供了一种将子节点渲染到父组件以外的 DOM 节点的优秀解决方案。Portal 的最常见用例是子组件需要从视觉上脱离父容器;...原创 2022-01-24 15:05:44 · 738 阅读 · 0 评论 -
react中的高阶组件HOC
react项目中使用hoc的例子:1,使用 create-react-app react-hoc 创建项目(react-hoc是项目名字),这种方式创建的项目默认是不支持装饰器的,配置方式可查看react中使用装饰器_yinge0508的博客-CSDN博客,创建项目并配置后的项目目录结构如下所示:高阶组件Hoc/index.js:import React, { Component } from 'react';const Hoc = (Comp) => { return c.原创 2022-01-23 20:01:50 · 414 阅读 · 0 评论 -
react中使用装饰器
装饰器 decorator 是一种函数,是 Es6 的一个语法糖,是一种与类(class)相关的语法,用来注释或修改类和方法以@+函数名形式展现,可以放在类和类方法的定义前面为什么要使用装饰器模式?在设计模式中讲到优先使用对象而不是类继承,动态的给对象添加一些额外的属性或方法,相比与使用继承,装饰器模式更加灵活在 React 中,高阶组件是一个非常厉害的东西,它最大的特点就是能够:重用组件逻辑.达到精简代码能力使用create-react-app创建项目后,它默认是不支持装饰器模式的,需原创 2022-01-23 16:11:52 · 1334 阅读 · 0 评论 -
react 中的Hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。import React, { useState, useEffect } from 'react';export default function UseState() { // useState是一个方法,参数是默认值, 可以让函数组件中拥有state //从useState解构出来是一个数组, count 是初始值变量,setCount 是更改cou原创 2022-01-20 14:35:07 · 205 阅读 · 0 评论 -
react中使用 setState 修改数据
import React, { Component } from 'react'export default class Like extends Component { constructor() { super(); this.state = { isLike: false, isLike2: false, } } // 点击事件 handleLikeBtn = () => { // react 里修改数据用setS.原创 2022-01-12 17:37:41 · 1430 阅读 · 0 评论 -
react 中样式写法
方式一:行内样式:优点:基于内联样式书写的样式肯定不会导致样式冲突,可以动态获取state中的状态来完成动态样式缺点:采用小驼峰写法, 有的css书写没有提示易错,在JSX中写大量的style样式,比较混乱,伪类, 伪元素这种样式无法通过内联样式编写。import React, { Component } from 'react';class ReactStyle extends Component { constructor(props) { super(props)原创 2021-12-31 16:56:50 · 4895 阅读 · 0 评论 -
react使用styled-components编写样式组件并向组件传值
样式组件 ButtonC:import styled from 'styled-components'; // 引入styled-components组件// 生命样式 ButtonA组件,通过styled 对象进行创建,注意styled.hlml 元素后面是 反引号;const ButtonC = styled.button` width: 120px; height: 40px; border: 1 px solid ${props => props.color}; co原创 2022-01-05 13:13:08 · 3306 阅读 · 0 评论 -
react学习中的总结:验证传递的数据
1,验证父组件是否向子组件传递数据了,以及传递的数据类型,可以使用prop-types - npm具体用法点击看详情吧。npm install --save prop-types类组件中的使用例子:import React, { Component } from 'react'import PropTypes from 'prop-types'; // 引入传值验证的插件export default class ButtonB extends Component { static..原创 2022-01-06 17:12:42 · 565 阅读 · 0 评论