
react项目
React 简书项目1:create-react-app “jianshu”2:项目准备:备注:是全局的样式,放入reset.css。3:引入第三方模块 styled-components ,yarn add styled-components -S,该模块是把css变成js文件,把index.css换成style.js 4:style.js引入reset.cssimport { createGlobalStyle } from 'styled-components'export const Global...
2024-01-10
react 基础
react 组成 一、react 组件基础 1、React 虚拟Dom概念,这是react性能高效的核心算法 2、React 组件,理解react组件化 3、React 多组件嵌套 4、jsx 内置表达式 5、生命周期,纵观整个react的生命周期 2、React 属性与事件 1、State 属性,控制着react...
2024-01-10
react学习篇
react众所周知的前端3大主流框架之一,由于出色的性能,完善的周边设施风头一时无两。前端MVVM主流框架都有一套自己的模板处理方法,react则使用它独特的jsx语法。在组件中插入html类似的语法,简化创建view的流程。下面让我们来认识一下构建的两种元素原生元素ReactDOM.render(( <div> <h1>标题</h1>...
2024-01-10
react优化性能
优化性能AvoidReconciliationReact创建并保存一渲染UI的镜像,通常被称为virtualDOM,当组件的props或者state发生变化时,React会通过对比虚拟DOM和新返回的元素,如果二者不同,则更新DOM。在某些情况下,可以通过shouldComponentUpdate生命周期函数来加速这种对比的过程。此函数在重新渲染前触发,默认返回tr...
2024-01-10
react采坑笔记
1. dva + antd input设置defaultVaule时查看时inpu有值但是页面上不显示解决办法 设置一个key值,当key值改变从新渲染<div key={this.props.value}><input type="text" defaultValue={this.props.value || ''} /> </div> ...
2024-01-10
react环境搭建
①:安装nodejs,它会自动帮你安装npm管理包工具 ②:去官网安装react脚手架工具,https://reactjs.org/ 然后点击Docs后,点击右边Create a New React App ③:输入命令:npx create-react-app 你的项目名字 这一步也可以直接输入:npm install -g create-react-app 然后 create-rea...
2024-01-10
显示react配置
1、由于react默认隐藏webpack配置需要手动显示。npm run eject//Are you sure you want to eject? This action is permanent. (y/N) y...
2024-01-10
react高阶组件
高阶组件为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念。所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装,也可以重写部分生命周期。首先看一下简单的例子:在components文件夹下新建Hoc.js组件文件,并在index.js中引入该组件。...
2024-01-10
react性能优化
react是由facebook公司推出的,主打的口号就是高性能。那么我们在使用的时候,如果能在做一下优化的,那么react使用的性能会更高,用户体验也会更好。下面我就列出几种优化的方案供大家参考一下1. setState的优化16.0更新以后,setSate书写的时候,可以直接穿一个带两个参数的函数,使得我们在重新...
2024-01-10
react 基础篇
react 初学2018/10/27/ 10:18:59react 基础常识jsx 语法及使用规范jsx 是被使用在模板中的,也就是 return( jsx 写在这里 )变量这样写{value}, 执行js基础操作这样写{ 1 + 1 }, 还可传入数组,jsx会自动展开数组 render(){ var arr = [<div>我是div</div>, <p>我是p</p>, <span>我是span</span>] return( <div>{arr}</div> ) }...
2024-01-10
react的漫漫之路
学习React不是一蹴而就的事情,入门似乎也没那么简单。但我觉得这一切都是值得的。这是我在学习React中的一些心得,希望能够帮助到大家!React可以使用两种样式,一种是普通的css,一种是在React中定义的样式。普通的css样式,通过className=""来引用<style> .style_2{ background-color: #6699ff; font-size: 24px;...
2024-01-10

react中使用屏保
1,默认路由路径为屏保组件 1 <HashRouter history={hashHistory}> 2 <Switch> 3 <Route exact path="/" component={ScreenSaver} /> 4 <Route exact path="/brandIntroduce" component={BrandIntroduce} /> 5 ...
2024-01-10
react 条件渲染
实例<div id="example"></div><script type="text/babel"> class LoginControl extends React.Component { constructor(props) { super(props); this.handleLoginClick = this.handleLoginClick.bind(this); this.handleLogoutClick...
2024-01-10
react 内存泄漏
在一个已经卸载的组件中 useEffect中调用一个一个定时器,定时器内部使用了useState更新状态,会发生内存泄漏的警告然后我发现使用useState会导致内存泄漏,改用声明一个变量则不会有此警告,但是下面的dom不会发生更改回答https://zh-hans.reactjs.org/d...通常,组件卸载时需要清除 effect 创建的诸如订阅或计...
2024-01-10
react项目8点优化
本文篇幅较长,将从 编译阶段 -> 路由阶段 -> 渲染阶段 -> 细节优化 -> 状态管理 -> 海量数据源,长列表渲染方向分别加以探讨。一 不能输在起跑线上,优化babel配置,webpack配置为项1 真实项目中痛点当我们用create-react-app或者webpack构建react工程的时候,有没有想过一个问题,我们的配置能否让...
2024-01-10
react环境搭建(-)
1.安装nodeJS环境2.安装 react 指令:npm install -g create-react-app3.创建项目 create-react-app react-demo4.安装yarn包管理工具 npm install i yarn5.安装react-router yarn add react-router ...
2024-01-10
react 写一个贪吃蛇
示例:全部代码如下:snake.jsximport React, { Component } from 'react';import PropTypes from 'prop-types';import { is, fromJS } from 'immutable';import "./snake.less";const TYP = { normal:1, head:2, body:3, food:4};const DIRCTION = { top:1, bottom:2...
2024-01-10
react入门学习及总结
前言不知不觉一年又过去了,新的一年又到来,2019应该要好好思考,好好学点有用的东西,规划下自己今后的学习方向,不要再像以前那样感觉很迷茫。react简单介绍官网及中文文档https://reactjs.orghttps://github.com/facebook/reacthttps://react.docschina.org/和vue一样,react是一个用于构建用户界面的 JavaScript 库,...
2024-01-10
学习react心得及总结
注意学习这个在D盘:小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说且文字react生命周期及其它注意事件/** react中组件里的render函数可以找到组件的this* 在render方法里调用函数时函数是可以找到this的,react中组件里的方法函...
2024-01-10
react Diff算法
一个页面就是一个DOM树,当页面发生变化的时候,又会形成另一个DOM树,这两个树要作比较的时候,就用到了Diff算法。传统的diff算法为O(n^3),相当复杂。时间复杂度是检测一个算法或者一个性能好坏的重要因数。其他它没有什么神奇的,只是一个名词而已。O(n^3) -> O(n^2) -> O(n)从左到右,时...
2024-01-10
react 环境快速搭建
1. yum install nodejs2.npm 淘宝镜像配置 参考 http://blog.csdn.net/wangweiscsdn/article/details/534149653.node -v4.npm -v5. 项目目录搭建[html] viewplain copy//package.json { "name": "chatme", "version": "1.0.0", "description": "", "author": "weiwei", "...
2024-01-10
react全家桶,送你了
1.UI组件库。国内主要以antd为主,当然element也推出了react版本的elementUI.2.前端路由库。最流行的莫属react-router,目前已出5.0版本,大大提高了前端路由的灵活性和可控性。3.状态管理。比较流行的有mobx,redux。mobx更加轻量简单,redux提供更灵活的中间件机制,约定式使得代码使用成本有点高但是带来的好...
2024-01-10
react学习记录(一)
一、React是什么 声明式写法(强调结果,命令式编程强调过程) 组件化 一次学习,随处编写(多种应用场景,web程序,原生手机应用,系统应用,命令行工具)二、为什么学习react 大公司加持-facebook 最流行,使用人数最多,被开发者喜爱 简...
2024-01-10
react 使用的小建议
使用pureRender,setState和Immutable.js来操作stateImmutable 中文意思不可变。不能直接修改state的值,要用setState 和Immutablereact 官方要求不要直接修改state,比如this.state.name = "suyuan"是错误的写法,应该用this.setState({name, "suyuan"});原因1.其实state并不是不可变的,官方是希望你把他当做不变来用,因为只有se...
2024-01-10
