react组件性能优化_南风晚来晚相识-编程思维

jsx语法的转化过程 jsx仅仅是createElement()方法的语法糖 jsx语法会被 @balel/preset-react插件编译为createElement()方法 组件的更新机制 setState的两个作用 1.修改state 2.更新组件ui 父组件在重新渲染的时候 子组件也会重新渲染 但是只会渲染当前组件的子树 组件性能优化---减轻state 1.state只存储跟组件

react中setstate方法详细讲解_南风晚来晚相识-编程思维

setState跟新数据是同步还是异步? setState跟新数据是异步的。 如何用代码表现出来是异步的。 点击按钮更新数据,然后去打印这个值看一下 setState跟新数据是异步的 class Father extends React.Component{ state = { num:0 } addHandler = () => { this.setStat

React中render Props模式-编程思维

React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi。 而是利用Raect自身的编码特点,演化而来的固定编码写法。 什么是render Props模式 1.把prop是一个函数并且要告诉组件要渲染什么内容的技术,叫做render Props模式。 2.注意的是:并不是该模式叫做render Props就必

React中生命周期的讲解-编程思维

什么是生命周期? 从出生到成长,最后到死亡,这个过程的时间可以理解为生命周期。 React中的组件也是这么一个过程。 React的生命周期分为三个阶段:挂载期(也叫实例化期)、更新期(也叫存在期)、卸载期(也叫销毁期)。 在每个周期中React都提供了一些钩子函数。 生命周期的描述如下: 挂载期:一个组件实例初次北创建的过程。 更新期:组件在创建后再次渲染的过程。 卸载期:组件在使用完后被销毁的

react 页面跳转并传值-编程思维

页面内 页面的跳转有2种情况,一种是点击事件后的执行,可以直接写在组件控件(按钮、超链接等)中的。 <Button type="primary" style={{ float:"right", display : repair["state"] == '2' ? 'inline': 'none'}} > <Link to={{pathname:"/

微前端(qiankun)主应用共享React组件-编程思维

前言 最近需要重构一个老项目,定的方案用微前端去改造。主应用是老的项目,微应用是新的项目,由于重构时间比较紧张,子应用还需要使用父应用的一些组件。过程中遇到一些问题,记录一下。 方案 我们知道qiankun,可以通过props通信传递数据,把组件通过props传递过去不就行了。来开始改造我们的代码 主应用 导入组件,通过props共享出去 import { registerMicroApps,

React中Props的详细使用-编程思维

props中的children属性 组件标签只用有子节点的时候,props就会有该属性; children的属性跟props一样的,值可以是任意值;(文本,React元素,组件,函数) 组件: <ClassCom> 传递的数据 </ClassCom> 这样的组件标签中就会有子节点 props中的children的简单使用 <!-- 主页面 --> imp

React中函数组件与类组件的两种使用-编程思维

React 创建组件的两种方式 函数组件:使用js函数创建的组件 约定1:函数名称必须以大写字母开头 约定2:函数组件必须要有返回值. 如果返回值为null.表示不渲染任何内容。 return null [什么都不会渲染了] 如果没有return会报错的哈 怎么使用函数组件呢? 直接使用函数名作为组件的标签名。 标签名是双标签也可以是单标签。 为什么React的函数组件必须以大写字母开头呢?

React中事件的绑定-编程思维

事件绑定 语法:on +事件名= { ()=>{ do something }} <!-- 点击事件 --> onClick={ () => { } } 注意的是:React采用的是驼峰命名法。 需要注意的是:在类组件中和函数组件中绑定事件是不同的哈 在类组件中绑定事件 <!-- 点击事件 --> import React from "react

React类组件中事件绑定this指向的三种方式-编程思维

有状态组件和无状态组件 函数组件又叫做无状态组件,类组件又叫做有状态组件。 状态又叫做数据 函数组件没有自己的状态,只负责静态页面的展示。 我们可以理解为纯ui展示。() 类组件有自己的状态,扶着更新UI,会让页面动起来. state的基本使用 state就是数据,是组件内部的私有数据。 只能够在组件内部使用。 state的值是一个对象,表示一个组件中可以有多个数据。 设置值state使用

React中受控组件与非受控组件的使用-编程思维

受控组件 受控组件的步骤: 1.在state中添加一个状态,作为表单元素的value值(控制表单元素值的来源) 2.给表单元素绑定change事件,将表单元素的值设置为state的值(这样就可以控制表单元素值的变化) 受控组件的简单使用 index.js import React from 'react'; //这个是react这个包,我们是需要的 import ReactDOM from '

React数据通信父传子和子传父的使用-编程思维

组件中的props 在react中,props的特点是: 1.可以给组件传递任意类型的数据 2.props是只读的对象,只能够读取属性的值,无法修改对象 如过我们强行修改数据,会报错,告诉我们该属性是只读属性。 ps:在类组件中,如果写了构造函数,应该将props传递给super(). 否则无法在构造函数中获取到props 函数组件-父传子 子组件.js const FunCom = (pr

React中兄弟组件通信和组件跨级传递Context的使用-编程思维

React兄弟组件之间的通信 Child2组件需要去更改Child1组件中的数据。 因为Child1和Child2是兄弟组件 所以数据和事件都放在最进的父级组件中去 兄弟组件通信的简单使用 import React from 'react'; //这个是react这个包,我们是需要的 import ReactDOM from 'react-dom'; //这个是react的虚拟dom cla