首先安装react-redux，命令如下：yarnaddreact-redux连接List组件和Reduxstore的samplecode如下：importReactfrom"react";import{connect}from"react-redux";constList=(props)=>(<div><h1>MyList</h1>{

react项目开发记录1.antdRangePicker设置当前一年的选择时间<RangePickerstyle={{width:"100%"}}value={[this.state.startValue,this.state.endValue]}onChange={this.handlePickerchange}disabledDate={this.handleDisabledDate}format="YYYY-MM-DD

自己学习途中的笔记，如果你发现有误，欢迎指正

react是什么?react是一个声明式的, 高效且灵活的用于构建用户界面的javaScript的库.react组件jsx文件,里面是jsx语法生成的domjsx语法jsx除了是文件后缀外,在组件内还是一种语法.`<img />`这个jsx语法是`React.createElement('img')`一种看上去很像html的语法#

环境配置安装脚手架：npminstallcreate-react-app安装yarn：brewinstallyarn创建项目：create-react-appantd-demo切换路径：cdantd-demo安装路由：yarnaddreact-router-dom安装axios：yarnaddaxios安装antd：yarnaddantd启动项目：yarnstart

引言前进刷新，后退不刷新，是一个类似app页面的特点，要在单页web应用中做后退不刷新，却并非一件易事。为什么麻烦spa的渲染原理（以vue为例）：url的更改触发onHashChange/pushState/popStateeplaceState，通过url中的pathName去匹配路由中定义的组件，加载进来并实例化渲染在项目的出口rou

importReact,{useState,useCallback,memo}from'react'constChild=memo((props)=>{console.log('childrun...');return(<><h1>hello</h1><buttononclick="{prop

本周继续就前端之变阐述自己的思考。前面我讲了前端的一些变化，但是事实上，过去数年，前端不仅是在自己的技术方向发生了巨大的变化，它试图向所有技术方向发起进攻，取代其主流技术。那这一切又是怎么回事，现状如何？本篇为前端之变系列的第四篇：进击的前端，本系列其它文章：前端之变（一）：

react中useCallback使用案例 importReact,{useState,useCallback,useEffect}from"react"constset=newSet();exportdefaultfunctionUseCallback(){//返回一个数组,第一个值是状态,第二个是改变状态的函数const[num,setNum]=useState(1);const[age,setAge]

react中useMemo使用结合案例演示 importReact,{useState,useMemo}from'react'constChildComp=({name,children})=>{functionchangeXiaohong(_name){console.log('小红向我们走来了.....');return_name+'小红向我们走来了'

1.Nodejs安装nodejs 下载地址： https:/odejs.org/en/download/  2.cnpm安装npminstall-gcnpm--registry=https:/egistry.npm.taobao.org  3.项目创建使用UMI初始化脚手架yarncreateumiapp，app(项目名称)选择typescriptcomplete有演示数据和模板，这

react中如何使用useReducer？  importReact,{useReducer}from'react';//redux必须的内容//storereducer/*useReducer使用？1.创建数据仓库store和管理者reducer2.通过useReducer(reducer,store)来state和dispatch*/conststore={num:10

react-jsx就是用js语法封装了各种组件，通过挂载组件实现各种功能    （ ALL  in  JS  ）1.map函数一个数组使用map函数可以快速遍历应对其进行操作；例1：一个数组中含有一些数，遍历输出数组中的数乘以2后的结果letsource=[1,2,2,3,5,9]letdouble=sour

react-nativeAPP开发组件4-我的导言组件：UserHome页面调用：UserHome页面注意导言 最近做app，记录下自己写的组件组件：UserHome页面importReact,{Component,useState}from'react';import{StyleSheet,Text,View,Dimensions,Image,Button,TouchableOpaci

布局器bootstrap布局器，网上有不少，但是个人感觉最好的是https://www.layoutit.com/bootstrap布局器生成出来的html代码，需要再做修整，例如button要改为Button,这是因为React-BootStrap的语法规则要求。使用布局器，有利于快速地产生一些可修改的代码，以提高工作效率。

一、component-function函数组件的定义 functionWelcome(){return<h1>HelloWorld</h1>}conste=<Welcome></Welcome>ReactDOM.render(e,document.getElementById("app"));函数组件传值*注意：不能把props直接放在{}中使用，会报错 fu

项目背景由于本人对前端领域非常感兴趣，接触到前端的时间也比较早，所以平时会用前端技术做一些有趣的东西，包括H5游戏，一些简单框架的封装，脚手架的设计等等，在我之前的文章中也有比较详细的介绍。最近由于希望对node服务端技术，vue，reacthooks这些技术实践做一次总结，也希望自己能做出

功能点：1.表格内的行拖拽（drag和drop都放在行上）2.跨表格的行拖拽（drag事件都放在行上，表格不空时drop事件放在行上，表格空时drop事件放在空提示上）3.表格拖拽（drag和drop都放在表格的header上）MytableV3.jsimportReactfrom"react";import{Table,ConfigProvider,Icon}

1.底层原理不一样:BrowserRouter使用的是H5的historyAPI,不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.path表现形式不一样BrowserRouter的路径中没有#，例如:localhost:3000/demoestHashRouter的路径包含#，例如:localhost:3000/#/demoest3.刷新后对

在上一篇对于CustomReactHooks一些思考文章末尾提及了ReactContext，那么在本篇中我们将了解一下ReactContext怎么解决状态共享问题以及一些其它想法。关于ReactContext提供官网对于usecontext的介绍constvalue=useContext(MyContext);无论组件在组件

React生命周期组件的生命周期每个组件都包含“生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。挂载当组件实例被创建并插入DOM中时，其生命周期调用顺序如下：construcotr()staticgetDerivedStateFromProps()render()componentDidMount()更

importstorefrom"../store";//数据存储exportconsttrans=(times)=>{times=times/1000;lethours;letminutes;letseconds;hours=Math.floor(times/60/60/60);minutes=Math.floor(times/60%60);s

创建项目命令行安装全局create-react-app脚手架工具：npminstall-gcreate-react-app定位到工作目录下，创建项目：create-react-appguixu-webpack特别注意：项目名称不能有大写字符。启动项目进入项目目录：执行npmstart，就能启动项目文件组成

1.Vuehttps://cn.vuejs.orgVue(读音/vjuː/，类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类

一.组件React可以将模块拆分为多个组件，用分而治之的思想，让各个组件专注于实现某个功能。在设计上，符合高内聚、低耦合原则。高内聚是组件内部实现自己的逻辑，像展示页面的jsx，定义行为的js，甚至是样式css。低耦合是，各个组件相互依赖关系要弱化，每个组件尽量独立。二.组件交互

运行项目后模拟器上显示的是响应超时。。。找不到原因，有大佬可以解答一下吗

ReduxAPI作用createStore用于创建一个store对象bindActionCreators用于简化操作，不用开发者手动触发dispatchReact-reduxAPI作用ProviderProvider用于包裹根组件，使所有被包裹的组件都能通过connect访问store，以便进行跨组件通信ConnectConnec

项目的搭建一开始就选择用最简单的create-react-app来搭建项目  输入npmi-gcreate-react-app下载脚手架然后通过指令 create-react-app[项目名称] 创建项目之后生成的代码就是很标准的node项目文件结构，稍微有点基础的看看package就懂了(实在不懂就记住 去把v

1、事件绑定React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同:React事件的命名采用小驼峰式，而不是纯小写。onClickonChange使用JSX语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。onClick={this.fn}类组件与函数组件绑定事件是差不多的

工具：hbuilder新建移动app得到一个mainfest.json文件，并进行配置如下：{"@platforms":["android","iPhone","iPad"],"id":"H5EC95E07",/*应用的标识，创建应用时自动生成，勿手动修改*/"name":"vivo浏览器",/*应用名