react函数式组件（不含hooks）-编程思维
react中组件有两种，函数式组件及类式组件，下面将简单记录下函数式组件的学习 函数式组件的定义就如同他的名字一样，直接定义一个函数就行 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http
react类式组件-编程思维
一、类知识回顾 class是es6新增的用于创建对象模板的关键字 创建一个类 //类名首字母要大写 class Person { //当创建一个没有继承任何父类的类时，需要编写constructor函数来为类的实例对象添加属性 constructor(name,age){ this.name=name this.age=age } //定义类
react属性state-编程思维
1、在类里面，可以定义 构造函数 class Demo { constructor(name,age){ this.name=name this.age=age } 一般方法（在类的原型对象上） class Demo { constructor(name,age){
react-props-编程思维
一， 类式组件使用props props属性用于给组件传递参数，且是只读属性 使用： class Demo extends React.Component{ render(){ const {name,age}=this.props return <div>
react属性-refs-编程思维
一、react的ref属性用于选中元素标签，继而对元素节点进行操作 1、字符串形式的ref(已被弃用) class Demo extendss React.Component { state{ name:'大明', age:18 } changeName= ()=>{ th
react-受控组件与非受控组件-编程思维
区分受控组件与非受控组件的标志是组件中的input等表单元素的值的来源与去向是否受到组件状态的影响，如果受到状态的影响，则称为受控组件，反之为非受控组件 狭义的受控组件：针对于表单控件而言，表单控件的value值受状态的控制，并且会影响到状态 受控组件 class Demo extends React.Component { state={ i
react-发布订阅-编程思维
使用发布订阅需要下载并引入一个库 npm i pubsub-js import Pubsub from 'pubsub-js' 发布 Pubsub.publish('message',data) 第一个参数是发布的消息的名称，用于与订阅者相匹配，第二个参数可以是数据，也可以是一个回调函数 订阅 Pubsub.subscribe('message',(va1,va2)=>{}) 第一
react-插槽-编程思维
在React中也有插槽技术 类似普通的HTML双标签,React组件也可以写成双标签的形式，并在标签之间插入内容 class Demo extends React.Component { render(){ return <div> <Ch
react-生命周期-编程思维
组件生命周期大体上分为三个阶段：1.组件初始化2.组件更新3.组件卸载 旧版生命周期 一、 componentWillMount() render() componentDidMount() 二、 componentWillReceiveProps(nextProps) shouldComponentUpdate(nextProps,nextState) componentWillUpdate(
react实现可页面可调节-编程思维
效果预览 关键代码 //调节窗口大小 useEffect(() => { if (conref.current) { conref.current.style.width = `${conref.current.clientWidth + delta}px` let t = conref.curre
react中useref的应用-编程思维
何为useRef useRef是随着react函数式组件发展而来的，是react众多官方hook中的一个，调用useRef可以返回一个伴随这组件整个声明周期不发生改变的对象，这个对象常见的用途有两个： 用于绑定dom元素，从而实现对dom元素的操作 用于保存不希望随着组件重新渲染而改变的值，如定时器 在项目中的应用 我在做自己的网站时遇到过一些场景，实现效果与预想中的不一致，让我头大了好一阵
react+ant design设置左侧菜单导航路由的显示与隐藏（与权限无关）-编程思维
最近在学习react时，用到了很流行的UI框架Ant Design，也了解了一下Ant Design Pro，发现它们都有导航组件，Ant Design框架的导航菜单在这里，Ant Design Pro是权限菜单，权限菜单简单来说就是根据登录的权限来展示不同的菜单给用户，比如管理员有给用户分配不同角色的权限，那管理员就可以看到系统管理等导航菜单，而用户A只有发布某些业务的权限，那用户A就不能看到
使用ant design的select组件时placeholder不生效/不起作用的解决办法-编程思维
先来说说使用Ant Design和Element-ui的感觉吧。 公司的项目开发中用的是vue+element-ui，使用了一通下来后，觉得element-ui虽然也有一些问题或坑，但这些小问题或坑凭着自己的能力还都能解决掉，使用起来也很丝滑柔顺。 而听说Ant Design和React更配哦，但是也说一下使用Ant Design的感觉吧，首先个人觉得Ant Design给的demo有点乱七八糟
react根据传参的不同动态注册不同的子组件-编程思维
上一篇文章介绍了关于Vue如何根据传参的不同动态注册不同的子组件，实现过程请查阅Vue.extend动态注册子组件，由Vue的这个功能我就自然联想到了使用react该如何实现同样的功能呢。其实，用react实现同样的功能会更简单，不用那么多的API，不用去查找这些平时可能用的很少的API的用法，这也是为什么很多人喜欢react的原因，react只提供了一些核心的API，至于怎么实现特定的功能，你
封装react antd的table表格组件-编程思维
封装组件是为了能在开发过程中高度复用功能和样式相似的组件，以便我们只关注于业务逻辑层的处理，提高开发效率，提高逼格，降低代码重复率，降低劳动时间，减少加班的可能。 本次组件的封装采用了函数式组件即无状态组件的方式来提高页面渲染性能，由于无状态组件在数据变更后不会主动触发页面的重新渲染，所以本次的封装也用到了React Hooks。下面简要介绍一下函数式组件和React Hooks。 函数式组件是
封装react antd的form表单组件-编程思维
form表单在我们日常的开发过程中被使用到的概率还是很大的，比如包含了登录、注册、修改个人信息、新增修改业务数据等的公司内部管理系统。而在使用时这些表单的样式如高度、上下边距、边框、圆角、阴影、高亮等等都大同小异、大差不差且表单的功能基本相似，所以很有必要对这些表单来一个简单的封装。 其实，封装组件的意义我们在上一篇封装react antd的表格table组件中已经介绍过了，这里不再做过多的描述
封装react antd的upload上传组件-编程思维
上传文件也是我们在实际开发中常遇到的功能，比如上传产品图片以供更好地宣传我们的产品，上传excel文档以便于更好地展示更多的产品信息，上传zip文件以便于更好地收集一些资料信息等等。至于为何要把上传组件封装成一个公共的、可复用的组件，在前两篇文章封装react antd的form表单组件、封装react antd的表格table组件中已经作了很多介绍，这里同样不再赘述。 有朋友觉得这些功能组件在
封装react antd的dialog弹窗组件-编程思维
前一段时间分享了基于vue和element所封装的弹窗组件（封装Vue Element的dialog弹窗组件），今天就来分享一个基于react和antD所封装的弹窗组件，反正所使用的技术还是那个技术，情况还是那个情况。只是基于vue所封装的弹窗组件和基于react所封装的弹窗组件还是有很大差别的。一样的是封装的思想和思路，不一样的是实现的技术。 至于所用到的技术，还是跟之前分享的有关react组
react 性能 debug 小记-编程思维
前言 之前开发重构项目的时候，遇到了一些问题， 如 hooks 的性能问题和 quill 的重载问题。本文就是记录这些问题的解决过程。 场景 在基于富文本的输入场景中，我们发现在输入回车后会出现明显的卡顿现象。为了更好地展示此类场景，这里使用了一个简单的例子展示。 function App() { const [value, setValue] = useState('');
[react typescript] useful react prop type examples-编程思维
Relevant for components that accept other React components as props. export declare interface AppProps { children?: React.ReactNode; // best, accepts everything React can render childrenElement: