react列表
实例1<div id="example"></div><script type="text/babel">const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((numbers) => <li>{numbers}</li>);ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('example'));</script>实例2function NumberLis...
2024-01-10
入门react
state和props的区别props是作为传递给组件的，就像函数参数一样state是在组建内部使用的，当需要改变时候可以通过setState进行修改。对于setState的使用有个注意点，就是setState可能是异步的我应该如何更新那些依赖于当前的 state 的 state 呢？那就是给setState传一个函数给 setState 传递一个对象与传递一...
2024-01-10
react入门
react入门laiqun@msn.cn1. react要解决的问题降低页面从服务器和用户输入得到数据，来展示页面的过程的复杂性。2. react中CSS的写法1. css类选择器的写法: 以前是class,现在要改成className，原因是和ES6的javascript语...
2024-01-10
react状态
组件的生命周期分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOMReact 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。componentWillMount()componentDidMount()componentWillUpdate(object nextProps...
2024-01-10
react基础
上一篇文章主要是记录了自己是如何创建react项目的，今天则主要是总结一下react中的一个基础入门知识，包括数据定义和绑定、属性绑定、数组循环等等。组件继承和挂载当我们使用脚手架或者命令行创建一个项目时，会自动初始化一个首页，也就是项目的根组件节点，但是在正常的做项目时，是不...
2024-01-10
react优势
1.速度快react采用虚拟DOM的机制，在setState时更新DOM,而且是先更新虚拟DOM，再与实际DOM进行比较2. flux架构单向闭环更新流模式整个流程是:用户与 View 层交互，触发 ActionAction 使用 Dispatcher 进行分发Dispatcher 触发 Store 回调进行更新Store 更新触发 View 层事件View层 收到信号进行更新传统MVC模式:FLUX:Dispat...
2024-01-10
react jsx
基于vue的脚手架 构建一个以webpack 为主的工程化的目录 @vue/cli"react-app-polyfill": "^1.0.6",处理兼容的create-react-app 脚手架 $ npm i create-react-app -g $ create-react-app xxx 或者 $ npx create-react-app xxx 【yarn】----------------@vue/cli 可以让用户自己创建一个 vue.config.js 来修改默认...
2024-01-10
react第三方库
作者：慕课网链接：https://www.zhihu.com/question/59073695/answer/1071631250来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 R...
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源码解读
tipv16.8.6背景： 前端live-server后，运行项目时出现了Error: spawn cmd ENOENT原因： path环境变量配置不当，导致无法找到指定的程序，安装java环境环境变量配置JAVA_HOME环境准备node,yarn,JDK,开始克隆源码git clone https://github.com/facebook/react.git安装依赖，yarn install由源码编译项目目录结构如图。在这里...
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初始（1）
前言：react框架的出现是因为Facebook在建设Instagram交流平台的时候要处理大量的数据流，但是行业流行的MVC框架并不能适合Facebook公司的要求，他们就组织了自己的人力来开发react框架，发现很好用，并且在2013年实现了开源，react框架最求的目标就是只需要一个框架，在PC端mobile端和server上都能够运...
2024-01-10
初探react(一)
我们学习react首先是要了解react是什么，以及他的特点。React 是一个用于构建用户界面的 JAVASCRIPT 库,起源于 Facebook 的内部项目，用来架设 Instagram 的网站，拥有较高的性能，代码逻辑非常简单，React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React的特点有：1.声明式设计 −React采用声明范...
2024-01-10
react Hook
概念：在不使用class组件的情况下，允许你使用state和react的其他特性产生背景：在组件之间公用相同的逻辑往往很难，在以前的解决方案是：高阶组件和render props 但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。你可以使用 Hook 从组件中提取状态逻辑，使得这些逻...
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. 总结1. 通过onXxx属性指定事件处理函数(注意大小写)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性React中的事件是通过事件委托方式处理的(委托给组件最外层的元素,事件冒泡) ————————为了高效2. 通过event.target得到发生事件的DOM元素对象,避免...
2024-01-10
react学习笔记01
被项目拖了半年的我终于有时间学习react 了下面是我最近学习的笔记支持jsx语法 ReactDOM.render(<div><h1>hello, word</h1><h2>欢迎学习 React</h2><p data-myattribute = "somevalue"></p></div> , document.getElementById('example')); 语法 : ReactDOM.render( dom结构 , 父dom ) 支持独立运行Hello.jsReactDOM.render...
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，没事桥着玩
import { Component } from 'react';import { base } from 'nc-lightapp-front';const { NCButton,NCFormControl } =base;export default class MyInput extends Component{ constructor(props){ super(props); this.state={ input:{} } }}...
2024-01-10
分析一个react项目
目录结构 下面是使用npx create-react-app web-app来创建的一个项目（已经删除了多余的文件）web-app ├── node_modules │ ├── ....... │ └── ....... ├── package-lock.json ├── package.json ├── public │ └── index.html └── src ├── App.js └── index.js 其中node_mudole是...
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
