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资料
1 引入库<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script><script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script><script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>2 hello react !<s...
2024-01-10
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 组成 一、react 组件基础 1、React 虚拟Dom概念，这是react性能高效的核心算法 2、React 组件，理解react组件化 3、React 多组件嵌套 4、jsx 内置表达式 5、生命周期，纵观整个react的生命周期 2、React 属性与事件 1、State 属性，控制着react...
2024-01-10
react 事件
<div id="example"></div><script type="text/babel"> class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 这边绑定是必要的，这样 `this` 才能在回调函数中使用 this.handle...
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采坑笔记
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配置
1、由于react默认隐藏webpack配置需要手动显示。npm run eject//Are you sure you want to eject? This action is permanent. (y/N) y...
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-dnd
http://react-trello-board.web-pal.com/https://react-dnd.github.io/react-dnd/docs-tutorial.htmlhttps://codepen.io/anon/pen/xrwjyX?editors=1111...
2024-01-10
react学习笔记
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项...
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相关小技巧
一、我们在项目中切换路由的时候可能会遇到Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.Please check the code for the xxx component.关于react中切换路由时报以上错误，实际的原因是因为在组件挂载（mo...
2024-01-10
react项目8点优化
本文篇幅较长，将从 编译阶段 -> 路由阶段 -> 渲染阶段 -> 细节优化 -> 状态管理 -> 海量数据源，长列表渲染方向分别加以探讨。一 不能输在起跑线上，优化babel配置,webpack配置为项1 真实项目中痛点当我们用create-react-app或者webpack构建react工程的时候，有没有想过一个问题，我们的配置能否让...
2024-01-10
react中的路由使用
前言使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在最新React中，使用的是react-router-dom。本文主要针对react-router-dom进行说明。安装首先进入项目目录，打开终端，使用npm安装react-router-dom：npm install react-router-dom --save-dev操作配置打开项目目录中的src文件夹，编辑器...
2024-01-10
react-基础(2)
表单相关固定的几个属性和事件value: <input>,<textarea>;checked: <input> typeof checkbox, radio;selected: <option>;onChange: 作用于上面元素;默认值 render: function() { return <input type="text" defaultValue="Hello!" />; }获取事件触发handleChange: function(event) { this.setState({va...
2024-01-10
react中的性能优化
react中的性能优化 在项目开发的过程中，当你完成了一个产品的开发并不算你项目的结束，因为你还要去考虑你的代码的执行效率，项目的运行速度等问题，因此在react中，有如下的办法去提升你在项目开发中的效率问...
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心得及总结
注意学习这个在D盘：小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说且文字react生命周期及其它注意事件/** react中组件里的render函数可以找到组件的this* 在render方法里调用函数时函数是可以找到this的，react中组件里的方法函...
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学习记录（一）
一、React是什么 声明式写法（强调结果，命令式编程强调过程） 组件化 一次学习，随处编写（多种应用场景，web程序，原生手机应用，系统应用，命令行工具）二、为什么学习react 大公司加持-facebook 最流行，使用人数最多，被开发者喜爱 简...
2024-01-10
