react
文章平均质量分 54
react框架
头发超多的程序媛
这个作者很懒,什么都没留下…
展开
-
【webpack】配置React环境
【webpack】配置React打包环境配置React打包环境原创 2022-01-17 11:56:49 · 1255 阅读 · 0 评论 -
react 之利用createContext、useContext、useReducer代替Redux 进行数据管理
创建ColorStore.jsimport React, { createContext, useReducer } from 'react';// 创建上下文并暴露出上下文export const ColorContext = createContext()export const UPDATE_COLOR = 'UPDATE_COLOR'const reducer = (state,action)=>{ switch(action.type){ case UPDATE_COL原创 2021-02-05 15:56:26 · 427 阅读 · 0 评论 -
react props属性传递
父组件像子组件传递属性用props接受//父组件传入<son title='父组件传递的属性'></son>// 子组件使用//class组件使用<p>{this.props.title}</p>// 函数型组件的使用function son (props) { return <p>{props.title}</p>}...原创 2021-02-05 15:37:02 · 61 阅读 · 0 评论 -
react 组件通信之上下文context
上下文context有两个角色1.Provider 数据提供2.Consumer 数据读取使用context 可以避免通过中间元素传递props,context的设计目的是为了共享对于一个组件而言是全局的数据不使用context的情况下的代码:import React,{Component} from 'react'// 创建一个传递的数据源let store = { name:'lly', age:1}class Info extends Component{ rende.原创 2021-02-05 15:37:14 · 151 阅读 · 0 评论 -
react 高阶组件(HOC)
1.高阶组件-HOC(Higher-Order-Component)高阶组件是为了提高组件的复用率而出现的,抽离具有相同逻辑或相同展示的组件高阶组件其实是一个函数,接受一个组件,然后返回一个新的组件,返回的这个新的组件可以对属性进行包装,也可以重写部分生命周期使用如下:// 创建withLearnReact高阶组件,传递一个组件进去,返回一个新的组件 newComponent (返回的是函数组件)//进行属性添加const withNameReact =(Component) => {原创 2021-02-02 18:36:45 · 108 阅读 · 0 评论 -
react 之PureComponent、React.memo、组件复合写法
PureComponentPureComponent 是内部定制了shouldComponentUpdate生命周期的Component,它重写了一个方法来替换shouldComponentUpdate生命周期方法平常开发过程中设计组件能使用PureComponent的地方尽量使用使用的两个原则:1.确保数据类型是值类型2.如果是引用类型,确保地址不变,同时不应当有深层次数据变化使用pureComponent 可以省去shouldComponentUpdate生命周期的代码 ,代码会简单很多原创 2021-02-02 17:54:57 · 198 阅读 · 1 评论 -
react Hooks
Hook 是什么?Hook 是⼀个特殊的函数,它可以让你“钩⼊” React 的特性。例如,useState 是允许你在 React 函数组件中添加 state 的 Hook。什么时候我会⽤ Hook?如果你在编写函数组件并意识到需要向其添加⼀些 state,以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使⽤Hook。useStateimport React, { useState } from "react";export default function Hook.原创 2021-02-02 16:11:26 · 87 阅读 · 0 评论 -
react-router
react-router包含3个库,react-router、react-router-dom和react-router-native。react-router提供最基本的路由功能,实际使⽤的时候我们不会直接安装react-router,⽽是根据应⽤运⾏的环境选择安装react-router-dom(在浏览器中使⽤)或react-router-native(在rn中使⽤)。react-router-dom和react-router-native都依赖react-router,所以在安装时,react-r.原创 2021-02-02 15:49:59 · 142 阅读 · 0 评论 -
react之redux、react-redux、redux-thunk、redux-saga
你可能不需要reduxRedux 是负责组织 state 的⼯具,但你也要考虑它是否适合你的情况。不要因为有⼈告诉你要⽤ Redux 就去⽤,花点时间好好想想使⽤了 Redux 会带来的好处或坏处。在下⾯的场景中,引⼊ Redux 是⽐较明智的:1.你有着相当⼤量的、随时间变化的数据;2.你的 state 需要有⼀个单⼀可靠数据来源;3.你觉得把所有 state放在最顶层组件中已经⽆法满⾜需要了。4.某个组件的状态需要共享。reduxredux 是 JavaScript应⽤的状态容器,原创 2021-02-02 15:35:56 · 218 阅读 · 0 评论 -
react生命周期
⽣命周期⽅法,⽤于在组件不同阶段执⾏⾃定义功能。在组件被创建并插⼊到 DOM 时(即挂载中阶段(mounting)),组件更新时,组件取消挂载或从 DOM 中删除时,都有可以使⽤的⽣命周期⽅法。React V16.3之前的⽣命周期componentWillMount 在渲染前调用,在客户端也在服务端。componentDidMount :在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScrip.原创 2021-02-02 14:33:38 · 151 阅读 · 0 评论 -
react 中state初始化 、以及正确使用setState
正确使⽤setStatesetState(partialState, callback)partialState : object|function ⽤于产⽣与当前state合并的⼦集。callback : function state更新之后被调⽤。关于 setState() setState() 你应该了解三件事:1.不要直接修改 State// 错误示范this.state.comment = 'Hello';// 正确使⽤this.setState({comment: 'H原创 2021-02-02 14:15:44 · 898 阅读 · 0 评论 -
react组件
组件,从概念上类似于 JavaScript 函数。它接受任意的⼊参(即 “props”),并返回⽤于描述⻚⾯展示内容的 React 元素。组件有两种形式:class组件和function组件。class组件class组件通常拥有状态和⽣命周期,继承于Component,实现render⽅法。⽤class组件创建⼀个Clock:import React, { Component } from "react";export default class ClassComponent exten.原创 2021-02-02 14:05:30 · 51 阅读 · 0 评论 -
react 基础
JSX是⼀种JavaScript的语法扩展,其格式⽐较像模版语⾔,但事实上完全是在JavaScript内部实现的。JSX可以很好地描述UI,能够有效提⾼开发效率,体验JSX。基本使⽤表达式{}的使⽤,index.jsconst name = "react study";const jsx = <div>hello, {name}</div>;函数const obj = {fistName: "Harry",lastName: "Potter"};f.原创 2021-02-02 13:58:54 · 57 阅读 · 0 评论 -
react入门
react官网安装node.js 环境 官网下载傻瓜式安装安装create-react-app脚手架cnpm install create-react-app -g或yarn add create-react-app -g查看版本create-react-app --version创建项目create-react-app 项目名项目目录结构启动项目npm run start或yarn start打包项目npm run build或y原创 2021-02-02 13:40:55 · 70 阅读 · 1 评论