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
