ant design 4 表单使用-爱代码爱编程
ant design 4 表单使用 官网ant design。 1、写法。 // 引入组件 import { Form ,Button} from 'antd'; class YourComponent extends React.Component { constructor(props){ super(props);
Ract基础之恰当的获取数据一-爱代码爱编程
1、创建一个简单的组件，点击增加按钮计数器加1，点击减法按钮，计数器减一，如下 import React from 'react' export default class Counter extends React.Component{ constructor(props) { super(props); th
React基础之函数子组件-爱代码爱编程
1、概念：不按组件的形式传递子组件，而是定义一个可以从父组件接收参数的函数 import React from 'react' export const Name = ({children}) => children("world") Name组件中拥有定义为函数的children属性，并且没有按JSX表达式使用，而是作为函数被调用 上述组件
redux原理学习与理解-爱代码爱编程
毫无疑问，redux是react和RN开发中必不可少的重要组成，很多人使用它的时候，都是照搬，代码写完了，问他具体原理，鲜有人能够解释清楚.... 与我而言，这么多年的学习生涯中，学习一项新技能的时候，必定会追根溯源，搞清楚原理和设计初衷，这样不仅更容易理解学习，而且会使用的更加得心应手，出现问题更容易知道从哪里下手解决问题，所以，大周末早上来重新梳理r
react路由-爱代码爱编程
集成 react-router-dom Router 路由容器，如果想要使用路由功能，必须在最外层包裹一个Router、Router 分两种 HashRouter、BrowserRouter Link 声明式导航 Vue: Route 设置路由规则，同时又是占位符, 如果触发之后想替换到某个地方，你就写在哪里 注意： 1、默认情况下我们的react-r
react 组件传参-爱代码爱编程
父组件 ===> 子组件 props 父组件: render111(){ const cat = { cat_name:'蓝猫', cat_age:30 } return <div> <NoStateComp
React基础之高阶组件-爱代码爱编程
1、高阶组件其实就是函数，它接收组件作为参数，对组件进行增强后返回 const Hoc = Component => EnhancedComponet 2、举例：如果要为每个组件添加相同的className。可以编写一个高阶组件 const withClassName = Component => props => (<Co
React-路由2-爱代码爱编程
路由重定向 路由重定向使用的是react-router-dom的Redirect组件 import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom' import React from 'react' // 定义一个登录组件 function Log
试水 element-plus ui 组件库-爱代码爱编程
上次逛知乎发现 element 之前的团队，已经将 element-plus 开发出来了，看来我们可以在 Vue3 接着使用 element 了，在我的心目中 element 这个框架真的好，设计样式是最让我觉得友好，看着很舒服的 ui 组件框架。所以今天我们来写一篇关于 element-plus 的入门教程吧，小伙伴们 element-plus
React-路由-爱代码爱编程
React路由 根据不同的路径显示不同的组件内容，使用react-router-dom库 安装：npm install react-router-dom 下面例子中，通过export暴露App类，返回index.js中使用渲染，下面代码中，需要注意的是，Router的div内容是正常显示的，其中使用的exact为精确匹配 import React f
React-插槽-爱代码爱编程
React插槽 插槽用于组件中预留位置，就可以添加内容，这些内容可以被识别和控制，React需要自己开发支持插槽功能 原理：组件中写入的HTML，可以传入到props 先看下面代码，直接写内容在组件内是不起作用的，这时候在组件中输出props import React from 'react'; import ReactDOM from 'react
React开发可复用组件-爱代码爱编程
1、prop类型 （1）如果希望整个引用可以复用组件，关键要确保清晰的定义组件及其参数，以便能够直观使用。 React提供了一个非常简单的表达组件接口的强大工具，只要提供组件期望接收的prop名称与对应的验证规则即可。 import React from 'react'; import PropTypes from 'prop-types'; expo
Redux基本理念-爱代码爱编程
Redux 是 JavaScript 状态容器，提供可预测化的状态管理 简单代码 import { createStore } from 'redux' function counterReducer(state = { value: 0 }, action) { switch (action.type) { case 'cou
重构-分页器-爱代码爱编程
动画: 无 实现: startX变量来记录要渲染的中间按钮的起始页数 pageNum变量来表示要渲染的中间按钮的个数 currtX变量来记录当前的页数 (1)首尾固定数值 (2)根据传递的中间按钮要显示的个数 如果要显示的个数+首尾固定的2个数<=总页数,则不会出现省略号, (3)渲染中间按钮个数 1、要渲染的个
React基础学习-3-爱代码爱编程
目录 1. 虚拟DOM和diff算法1.1 createEmement 创建组件1.2 JSX转换过程1.3 虚拟DOM1.4 diff 算法1.5 递归实现 diff 算法2. 飞翔的大猪2.1 鼠标位置2.2 飞翔的大猪2.3 总结3. 组件复用3.1 render props模式3.1.1 创建鼠标位置组件3.1.2 复用鼠标位置组件3.1.
webStrom 开始你的第一个React应用-爱代码爱编程
一、webStrom 安装 官方下载地址：https://www.jetbrains.com/zh-cn/webstorm/ 二、环境安装 1、环境检测 首先要安装npm和node，输入如下命令：npm -vnode -v 如果没有安装需自行安装： node安装：https://nodejs.org/en/ 新版的nodejs已经集成了npm
React目录结构详细解析-爱代码爱编程
总览 WebStorm创建工程后目录结构如图所示： 1、package.json 每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。 负责 管理 整个
React - mobx-爱代码爱编程
项目搭建 搭建全局脚手架 npm install -g create-react-app 在 cra 中使用非 eject 方式启用 decorator 初始化 npx create-react-app mobx-demo 安装改变 create-react-app 中 webpack 配置插件 yarn add -D
react中高阶函数的使用-爱代码爱编程
高阶组件定义 高阶组件是个纯函数。 接受一个组件参数，然后在return里面是返回一个组件。 高阶组件使应用场景 目的： 把常用的逻辑独出来进行多次复用业务场景： 在一个多页H5中，部分页面有查看权限，比如新闻列表，详情，不需要进行任何操作就可以看。但是比如活动抽奖页，如果想参加就需要验证手机号登录，当一些新用户通过分享出去的链接进入活动页时，需要弹
react入门记录：关于react的一些注意点-爱代码爱编程
1.组件名的首字母必须为大写字母： 否则无法正常渲染，控制台报错 2.不能为一个标签定义多个class属性，否则只有最后一个属性值会生效。 实际结果： 可以通过下面的方式添加多个class值：注意class1后面有个空格 3.标签中的style值不能为字符串，必须为对象 结果：浏览器报错 可以使用下面两种方式定义style的内容 4.组