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状态
组件的生命周期分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOMReact 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。componentWillMount()componentDidMount()componentWillUpdate(object nextProps...
2024-01-10
react入门
react入门laiqun@msn.cn1. react要解决的问题降低页面从服务器和用户输入得到数据，来展示页面的过程的复杂性。2. react中CSS的写法1. css类选择器的写法: 以前是class,现在要改成className，原因是和ES6的javascript语...
2024-01-10
react初体验
Microsoft Windows [版本 6.1.7601]版权所有 (c) 2009 Microsoft Corporation。保留所有权利。D:\WebstormProjects\hello-react>create-react-app hello-worldCreating a new R...
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项目目录
yarn.lock项目文件依赖安装包的版本号package.json每个脚手架工具里面都有一个package.json文件，表示脚手架工具其实是一个node包工具，有一些项目介绍，依赖的包等gitgnore如果用git管理代码的话，有些文件不想传到git仓库的话，可以把这些文件定义到这里。...
2024-01-10
react第三方库
作者：慕课网链接：https://www.zhihu.com/question/59073695/answer/1071631250来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。React 已经诞生很久了，自从它诞生开始，围绕组件驱动形成了一个非常全面的生态，但是来自其他编程语言或者框架的开发人员很难找到要构建一个 R...
2024-01-10
初探react(一)
我们学习react首先是要了解react是什么，以及他的特点。React 是一个用于构建用户界面的 JAVASCRIPT 库,起源于 Facebook 的内部项目，用来架设 Instagram 的网站，拥有较高的性能，代码逻辑非常简单，React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React的特点有：1.声明式设计 −React采用声明范...
2024-01-10
react初始（1）
前言：react框架的出现是因为Facebook在建设Instagram交流平台的时候要处理大量的数据流，但是行业流行的MVC框架并不能适合Facebook公司的要求，他们就组织了自己的人力来开发react框架，发现很好用，并且在2013年实现了开源，react框架最求的目标就是只需要一个框架，在PC端mobile端和server上都能够运...
2024-01-10
react Hook
概念：在不使用class组件的情况下，允许你使用state和react的其他特性产生背景：在组件之间公用相同的逻辑往往很难，在以前的解决方案是：高阶组件和render props 但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。你可以使用 Hook 从组件中提取状态逻辑，使得这些逻...
2024-01-10
react项目开发入门
在html头部引入react相关js文件<!-- react核心库--><script src="../static/react/react.production.min.js" charset="UTF-8"></script><!-- react dom相关功能--><script src="../static/react/react-dom.production.min.js" charset="UTF-8"></script><!-- jiangJSX语法转换为JavaScript语法--><scr...
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. 总结1. 通过onXxx属性指定事件处理函数(注意大小写)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性React中的事件是通过事件委托方式处理的(委托给组件最外层的元素,事件冒泡) ————————为了高效2. 通过event.target得到发生事件的DOM元素对象,避免...
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入门的一些配置安装和启动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中常规删除功能
// 删除handleDeleteNiche = async () => {// 方法一：// let title = "删除";// let message = ( <div><p > 商机删除后列表将不可见此商机， 请谨慎操作！ </p> </div>);// let ret = await this.confirmModal(title, message);// ret && this.deleteNiche();// };// deleteNiche = async () => {// const ...
2024-01-10
react中key的作用
背景：如果为父节点添加多个相同的子节点时，不添加key属性，会报错但同时也会渲染出dom，渲染出dom其实是证明能从差异对象中渲染出真实dom，但报错的原因是因为这种写法会影响渲染的性能，不利于生层dom节点。作用：当我们生成两个不同的数组时，我们可以使用相同的 key 值：key的作用主要是...
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的路由权限控制
在使用路由的时候，有的时候我们的界面只能够在登录之后才可以看的到，这个时候就需要使用路由权限控制了找了资料发现一个就是我使用的方法，一个是高阶组件。 原谅菜鸟看不太懂不会使用高阶组件…………首先在路由中做一个私有权限的限制，限制里面的path就是你的私有界面 router.js <Switc...
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
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 合成的理解
这是react事件机制系列文章的第二篇-对于合成的理解，今天咱们就来说说合成这个名词。刚听说合成这个词时候，感觉是特别高大上，很有深度，不是很好理解。当我大概的了解过react事件机制后，略微了解一些皮毛，我觉得合成不单单是事件的合成和处理，从广义上来说还包括： 首先就是对原生...
2024-01-10
react hook 练手
代码：App.jsimport React, { useState, useEffect, createContext, useContext, useRef } from 'react';import { Button } from 'antd-mobile';const Text = createContext(); // useContext 要和 createContext 一起使用export default function App() { const inputRef = useRef();...
2024-01-10
react老项目安装依赖报错
看报错,知道是 当前的node版本不支持 fs.rmSync这个api,查询node文档确实是。这个api是node-v14.14.0增加的。我的node版本是node-v12.19.1。但出于整体考虑,不打算升级node版本。最终找到 是 site 这个插件导致的。具体查看site文档。...
2024-01-10
