react
关注
分享
扫一扫
react基础学习
前端-小鑫
这个作者很懒，什么都没留下…
展开
-
react Redux使用教程
redux状态管理 安装 npm install redux 核心： Action 操作 store Reducer 一个函数 store 数据 缺点：需要将store一层一层传递 加减Demo:let num = 0export default function counter(state = num, action) { if (action.type == 'ADD') { return state + 1...原创 2021-07-31 19:37:39 · 297 阅读 · 0 评论 -
react 路由 react-router-dom使用
下载 npm install react-router-dom（第四代版本开始）官网https://reacttraining.com/react-router/路由器 Routersimport { BrowserRouter , HashHistory ,Switch, Route, Link, Redirect, useParams } from "react-router-dom"; BrowserRouter 路由不带#，需要配置 响应请求服务 HashHistory 路由带# .原创 2021-07-31 19:28:19 · 453 阅读 · 0 评论 -
react 动画react-transition-group使用介绍
react-transition-groupyarn add react-transition-groupCSSTransitionin：如果this.state.show从false变为true，则动画入场，反之out mountOnEnter：默认false 即使in 是false 组件也会正常加载，如果是true则不会加载，只会在in为true时加载 appear：默认false 加载后自动执行 enter：默认false 是否开启进入转换(关闭后不进入entering状态，直接进入原创 2021-07-30 17:25:27 · 637 阅读 · 0 评论 -
React函数式Hooks-useRef()用法
函数式组件本身就没有实例，所以没有dom等于无法通过ref获取，而useRef则可以提供获取函数式组件的dom用途：获取dom 获取共享数据父组件获取子组件的domimport React, { useState, useCallback, useRef, PureComponent } from 'react'class Counter extends PureComponent { render() { const { props } = this;原创 2021-07-30 17:21:47 · 587 阅读 · 0 评论 -
React函数式Hooks-useMemo()用法
useMemo根据条件是否渲染组件useMemo与memo区别： menmo在渲染后执行 useMemo渲染中执行，且有返回值 useMemo只有满足回调的条件，接收定义的变量才会有值，否则都是0，例如count3只有满足count>3,count3才会不是0不重复执行函数 import React, { Component, useState, useMemo } from 'react'function UsememoTemplate() { const [count, s原创 2021-07-30 16:55:44 · 1110 阅读 · 0 评论 -
React函数式Hooks-useContext()用法
函数组件接收createContext传递的值，如不了解createContext可阅读react 创建上下文（createContext）使用（超详细）例子如下：import React, { Component, createContext, useState, useContext } from 'react'const CountContext = createContext()//之前获取数据的两种方式//第一种class TwoHook extends Component {原创 2021-07-30 16:10:25 · 263 阅读 · 0 评论 -
React函数式Hooks-useEffect()用法
函数组件没有生命周期，所以useEffect看做生命周期 在 componentDidMount componentDidUpdate 之后componentWillUnmount 之前，代替了这两个周期，可以进行操作dom以及卸载例子：监听窗口大小之前写法import React, { Component } from 'react'export default class TestUseEffect extends Component { state = { size原创 2021-07-30 15:53:11 · 237 阅读 · 0 评论 -
React函数式Hooks-useState()用法
函数式组件，使用函数组件可以拥有类组件的特性，例如state，生命周期等使用useState 语法 useState定义后 不能更改获取顺序import React, { useState } from 'react'export default function TestHooks(props) { const [count, setCount] = useState(() => { return props.defaultCount || 0 //默认初始化，只原创 2021-07-30 15:42:55 · 371 阅读 · 0 评论 -
react 组件渲染控制
场景：子组件不进行任何操作，但父组件操作更新将会导致子组件也进行了重新更新解决重复渲染组件方式：shouldComponentUpdate PureComponent memo 只可以是纯函数场景代码如下： ComponentTemplate组件每次执行点击事件都将会重新渲染Template组件import React, { Component, } from 'react'class Template extends Component { render() { .原创 2021-07-30 15:08:50 · 485 阅读 · 0 评论 -
react 异步组件加载lazy与Suspense
场景，组件异步渲染期间懒加载，组件加载失败情况lazy需要与Suspense配合使用 Suspense填充状态 fallback请求组件期间还没全部加载完成时显示的内容，需要传入组件实例 ，例如传入组件 ，例如 fallback={<loading/>} getDerivedStateFromError /componentDidCatch 错误捕获 import React, { lazy, Suspense, Component } from 'react'; //lazy异原创 2021-07-30 14:52:44 · 494 阅读 · 0 评论 -
react 创建上下文（createContext）使用（超详细）
原本组件传递需要一层一层props传递，传递太过繁琐，例如以下代码：import React from 'react'function NeedData(props) { return <div>{props.value2}</div>;}// 中间组件function Middle(props) { return ( <div> <NeedData value2={props.value} /&原创 2021-07-30 13:45:12 · 21818 阅读 · 0 评论 -
React生命周期
React的生命周期可以分为三个阶段：挂载、更新、卸载 constructor 初始化，接收两个参数props和context，如需使用参数需要使用super，且如果使用了constructor则必须使用super，否则thi指向将不正确 初始化 componentWillMount() constructor()初始化数据后，未渲染dom，组件准备挂载 componentDidMount() 组件第一次渲染完成，DOM生成， setState后组件会重新渲染，件挂载完毕原创 2021-07-29 17:11:17 · 786 阅读 · 0 评论 -
react Component与PureComponent区别
React.PureComponent 与 React.Component 几乎相同区别： Component 中只要使用了setState，是否有更改，都会重新渲染组件（包括子组件），如需判断是否要重新渲染组件，需要借助shouldComponentUpdate PureComponent 在原来Component 基础上自动添加了一个shouldComponentUpdate ，处理规则：对对象进行浅对比(指向地址变量，内容不变) 规则如下：function isReset原创 2021-07-29 14:29:44 · 177 阅读 · 0 评论 -
React setState使用与深入理解
setState作用更改数据，重新渲染页面，直接进行更改数据，值会更新，但页面不会重新渲染如不使用setState更改数据，则可以使用foceUpdate强制渲染页面setState与foceUpdate区别：相同点：都是重新渲染页面不同点：setState执行流程：先走shouldComponentUpdate=>ComponentWillUpdate 使用setState后，如不使用shouldComponentUpdate则即使没有更改数据也会重新渲染组件 foceUp原创 2021-07-28 22:07:54 · 466 阅读 · 0 评论 -
react props使用
props主要用于子组件接收父组件传递过来的内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2021-07-28 20:39:12 · 124 阅读 · 0 评论 -
react中的ref的3种方式
需要获取dom的时候使用 ，不建议多使用 因为会缓存到内存string类型绑定 （不推荐） 函数类型绑定 （不推荐） createRef绑定ref获取DOM更改数据String绑定方式import React from 'react'export default class ChangeRef extends React.Component { constructor(props) { super(props) this.state = {原创 2021-07-28 17:28:37 · 440 阅读 · 1 评论 -
react创建组件
react 的核心主要由以下部分react.js 核心库 react-dom.js 操作dom的react库 babel.js 解析jsx 语法格式为js <!-- react核心库 --> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <!-- react-dom 用于操作dom --><scrip原创 2021-07-28 17:12:27 · 210 阅读 · 0 评论