react路由
针对多个列表导航公用一个组建，然后 有两种路由方式1.import {HashRouter as Router,Route,Link} from 'react-router-dom'不过这个路由中会有#并且开发时会遇到错误，但是上线就没了。在最外面包裹的此时就是<HashRouter>2.import {BrowserRouter,Route,Link} from 'react-router-dom'这种是最好的...
2024-01-10
react介绍
注：React VR 可以编写全景用 官网地址https://reactjs.org/学习前可以先将Docs部分阅读一遍：https://reactjs.org/docs/getting-started.html...
2024-01-10
react 安装
首先，我们需要安装node.js，直接搜索并在官网下载安装包。 node.js官网：https://nodejs.org/en/安装好node开始react的安装流程1.cnpm install -g create-react-app 首先用npm 安装 create-react-app工具，其可以自动地在本地目录中创建react项目。2.create-react-app my-app 然后就可以使用命令创建新的react项目...
2024-01-10
react学习篇
react众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两。前端MVVM主流框架都有一套自己的模板处理方法，react则使用它独特的jsx语法。在组件中插入html类似的语法，简化创建view的流程。下面让我们来认识一下构建的两种元素原生元素ReactDOM.render(( <div> <h1>标题</h1>...
2024-01-10
第一个react
个人觉着react和vue是很相似的，之前还转载过一篇介绍两个异同点的文章，那个时候还完全不懂react，现在才慢慢开始接触，所以只能总结一些个人的心得，首先自然是react的优点了，个人觉着主要有以下几点吧。React 可以开发单页面应用 spa（单页面应用）react 组件化模块化 开发模式React通过对DOM的...
2024-01-10
react 学习
首先使用creat-react-app来创建项目,创建命令：create-create-app my-appnpm run start运行创建好后，目录中有一个src文件，里面的index.js是入口文件，页面从这里开始加载相当于vue中的app.vueapp.js文件是一个示例组件，我们可以修改这个文件，然后就可看到页面发生了变化如果需要暴露create-react-app的隐藏的webpack...
2024-01-10
react优化性能
优化性能AvoidReconciliationReact创建并保存一渲染UI的镜像，通常被称为virtualDOM,当组件的props或者state发生变化时，React会通过对比虚拟DOM和新返回的元素，如果二者不同，则更新DOM。在某些情况下，可以通过shouldComponentUpdate生命周期函数来加速这种对比的过程。此函数在重新渲染前触发，默认返回tr...
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入门案例
现在最热门的前端框架，毫无疑问是 React。上周，基于 React 的React Native发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都...
2024-01-10
react高阶组件
高阶组件为了提高组件复用性，在react中就有了HOC（Higher-Order Component）的概念。所谓的高阶组件，其本质依旧是组件，只是它返回另外一个组件，产生新的组件可以对属性进行包装，也可以重写部分生命周期。首先看一下简单的例子：在components文件夹下新建Hoc.js组件文件，并在index.js中引入该组件。...
2024-01-10
react的漫漫之路
学习React不是一蹴而就的事情，入门似乎也没那么简单。但我觉得这一切都是值得的。这是我在学习React中的一些心得，希望能够帮助到大家！React可以使用两种样式，一种是普通的css，一种是在React中定义的样式。普通的css样式，通过className=""来引用<style> .style_2{ background-color: #6699ff; font-size: 24px;...
2024-01-10
react学习日志3
四、state与生命周期1、什么是statestate 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改。组件的属性和状态改变都会更新视图。2、react组件的生命周期每个组件都包含“生命周期方法”，你可以...
2024-01-10
react 15来了
有段时间没做react的项目了，前两天才发现react搞了一个不太小的动作，不是遵循原来的小版本号迭代，从0.14.x继续更新，而是直接跳到了15.0.X。虽然业界一直有这个观点，0.x的版本视为非稳定版本即测试版本，但是react一直以来就是特立独行的始终不上1开头的版本而是继续在0.n的道路上一发而不...
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项目
1、运行环境要在node下。2、全局安装create-react-app npm install -g create-react-app3、create-react-app myapp /* 使用命令创建应用，myapp为项目名称 */4、npm start /*启动项目*/5、会看到浏览器打开：http://localhost:3000/提示！：1、create-react-app 是React官方提供的一个用于快速搭建项目的脚手架2、但...
2024-01-10
react 学习笔记4
用react-native的安装初始化AwesomeProject1.react-native init AwesomeProject cd AwesomeProject npm install 2 adb devices确定android虚拟机 adb devicesList of devices attachedemulator-5554 device3.react-native run-android 'enulator-5554'info Running jetifier to migrat...
2024-01-10
react-自定义事件
没有嵌套关系的组件（如兄弟组件）之间的通信，只能通过自定义事件的方式来进行。var EventEmitter = require('events').EventEmitter;import React,{Component} from 'react';import ReactDOM from 'react-dom';let emitter = new EventEmitter();class ListItem extends Component{ static defaultProps = { ...
2024-01-10
react阻止事件冒泡
react antd组件阻止事件冒泡： <Menu onClick={e => e.domEvent.stopPropagation()}> <Menu.Item key="0" onClick={() => handleEdit(item.id)}> 修改名称 </Menu.Item> <Menu....
2024-01-10
react应用多入口配置
https://www.cnblogs.com/veromcae/p/10012937.html注意/* new ManifestPlugin({ fileName: 'asset-manifest.json', publicPath: paths.publicUrlOrPath, generate: (seed, files, entrypoints) => { const manifestFiles = files.reduce((manife...
2024-01-10
react 项目中的优化
react v16.6之后 的按需加载（2019.07.04更新）React这个版本新加了lazy和Suspense这两个功能。对于上面的按需加载，可以修改代码为：import React, { Suspense } from 'react';import Loading from './my-loading-component';const LoadableComponent = React.lazy(() => import('./my-component'));export default class...
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 Diff算法
一个页面就是一个DOM树，当页面发生变化的时候，又会形成另一个DOM树，这两个树要作比较的时候，就用到了Diff算法。传统的diff算法为O(n^3)，相当复杂。时间复杂度是检测一个算法或者一个性能好坏的重要因数。其他它没有什么神奇的，只是一个名词而已。O(n^3) -> O(n^2) -> O(n)从左到右，时...
2024-01-10
react入门学习及总结
前言不知不觉一年又过去了，新的一年又到来，2019应该要好好思考，好好学点有用的东西，规划下自己今后的学习方向，不要再像以前那样感觉很迷茫。react简单介绍官网及中文文档https://reactjs.orghttps://github.com/facebook/reacthttps://react.docschina.org/和vue一样，react是一个用于构建用户界面的 JavaScript 库,...
2024-01-10
