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入门
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众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两。前端MVVM主流框架都有一套自己的模板处理方法，react则使用它独特的jsx语法。在组件中插入html类似的语法，简化创建view的流程。下面让我们来认识一下构建的两种元素原生元素ReactDOM.render(( <div> <h1>标题</h1>...
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优化性能
优化性能AvoidReconciliationReact创建并保存一渲染UI的镜像，通常被称为virtualDOM,当组件的props或者state发生变化时，React会通过对比虚拟DOM和新返回的元素，如果二者不同，则更新DOM。在某些情况下，可以通过shouldComponentUpdate生命周期函数来加速这种对比的过程。此函数在重新渲染前触发，默认返回tr...
2024-01-10
react第三方库
作者：慕课网链接：https://www.zhihu.com/question/59073695/answer/1071631250来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 R...
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中就有了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初始（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 条件渲染
实例<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 Hook
概念：在不使用class组件的情况下，允许你使用state和react的其他特性产生背景：在组件之间公用相同的逻辑往往很难，在以前的解决方案是：高阶组件和render props 但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。你可以使用 Hook 从组件中提取状态逻辑，使得这些逻...
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，没事桥着玩
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 计算衍生数据
import React from 'react'import { connect } from 'react-redux'import TodoList from '../components/TodoList'import {toggleTodo,VisibilityFilters} from '../actions/index'import { createSelector } from 'reselect'const getVisibleTodos = (todos,filter)=>{ swit...
2024-01-10
react 基本配置使用
react入门的一些配置安装和启动npx create-react-app my-appcd my-app npm start 创建 ts的项目： npx create-react-app demo --template typescript react默认是将 webpack配置放置在node_module里面的，需要修改webpack配置，就的反编译出来，其中提供了一个指令npm run eject 执行命令是，可能会报错，是因为，需要先将代...
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入门学习及总结
前言不知不觉一年又过去了，新的一年又到来，2019应该要好好思考，好好学点有用的东西，规划下自己今后的学习方向，不要再像以前那样感觉很迷茫。react简单介绍官网及中文文档https://reactjs.orghttps://github.com/facebook/reacthttps://react.docschina.org/和vue一样，react是一个用于构建用户界面的 JavaScript 库,...
2024-01-10
react入门小demo
基于官方的入门demo进行TS改造准备初始化脚手架// 执行以下命令就能看到在当前目录my-app文件夹npx create-react-app my-app --template typescript找到my-app文件夹// 启动脚手架yarn start初始化demo将以下代码复制到app.css中body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px;}ol, ul { padding-left: 30px;}....
2024-01-10
react路由初探（2）
对着官网的例子反正是没有搞出来，所以搜了一大堆，最终搞出来了，记录一下import React from 'react';// 首先我们需要导入一些组件... （这个是中文网示例，按这个做，报一大堆错误，刚学习摸不着头脑） import { Router, Route, Link } from 'react-router'import { BrowserRouter as Router, Route, Link } from "react-router-dom";impor...
2024-01-10
