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
state和props的区别props是作为传递给组件的，就像函数参数一样state是在组建内部使用的，当需要改变时候可以通过setState进行修改。对于setState的使用有个注意点，就是setState可能是异步的我应该如何更新那些依赖于当前的 state 的 state 呢？那就是给setState传一个函数给 setState 传递一个对象与传递一...
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和vue是很相似的，之前还转载过一篇介绍两个异同点的文章，那个时候还完全不懂react，现在才慢慢开始接触，所以只能总结一些个人的心得，首先自然是react的优点了，个人觉着主要有以下几点吧。React 可以开发单页面应用 spa（单页面应用）react 组件化模块化 开发模式React通过对DOM的...
2024-01-10
react_瞎敲
import {Component} from 'react';import './index.less';import {render} from 'less';export default class MyDiv extends Componet{ constructor(props){ super(props); this.state = { content : props.news }; } nextPage = ()...
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高级指引
参考网站https://react.docschina.org/docs/jsx-in-depth.html深入 JSX本质上来讲，JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。<MyButton color="blue" shadowSize={2}> Click Me</MyButton>编译为：React.createElement( MyButton, // 组件名称 {color: 'blue', sh...
2024-01-10
react入门案例
现在最热门的前端框架，毫无疑问是 React。上周，基于 React 的React Native发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都...
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学习日志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 onClick={this.OnClick.bind(this)}></div>② 使用函数式声明事件：<div onClick={()=>this.OnClick()}></div>③ 在按钮内声明，在constructor内绑定：constructor(props) { super(props); this.OnClick = this.OnClick.bind(this)}render(){ return( <div onClick=...
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-基础(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 学习笔记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搭建项目流程
1 项目搭建 npm install -g create-react-appcreate-react-app react-mobilecd react-mobilenpm install从上面的项目目录可以看到，没有webpack配置文件，这是因为这个文件被隐藏了起来，如果想控制webpack配置文件，可以执行npm eject命令，目录下面就会出现config文件。注意：npm eject之后，删除node_modules文件 重新npm install ...
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构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在最新React中，使用的是react-router-dom。本文主要针对react-router-dom进行说明。安装首先进入项目目录，打开终端，使用npm安装react-router-dom：npm install react-router-dom --save-dev操作配置打开项目目录中的src文件夹，编辑器...
2024-01-10
react列表数据显示
react的列表数据一般是用map循环显示的。使用map注意：map的回调函数为箭头函数时，后面如果加大括号（箭头函数常规编写），必须要有return才可以，如果箭头函数后面没有大括号（箭头函数简写），可以不用加return。这是因为：箭头函数简写时只需要一个表达式和一个返回值。常规编写时必须有一...
2024-01-10
react基础知识总结
目录前言开始React 生命周期React FiberReact setStateReact 事件机制前言最近在准备面试。复习了一些react的知识点，特此总结。开始React 生命周期react 16以前的生命周期是这样的组件在首次渲染时会被实例化，然后调用实例上面的componentWillMount，render和componentDidMount函数。组件在更新渲染时可以调用compon...
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
