jdrunk的博客

https://github.com/YvetteLau/Blog参考文章尽可能低耦合，组件之间的依赖越小越好比如不要直接修改父组件状态。最好从父级传入所需信息，不要在公共组件中请求数据传入数据添加校验处理事件的方法写在父组件中易用性拓展性可维护性可重用性一个封装组件提供 props 控制其行为而不是暴露其内部结构。1、封装耦合：耦合是决定组件之间依赖程度的系统特性松耦合（易修改、易复用、易测试）可以在不影响应用其它部分的情况下对某一块进行修改任何组件都可以替换

子组件tsx文件import React from 'react';import './staticOA.less'export enum LineMode { Left, Right, NoLine, JustLine,}export default function StaticOA(props: any) { const { data, lineMode, personMessageMode, stepNum, istop, isError,

子组件（Form.List组件）import React from 'react';import { Form, Col, Row, Select } from 'antd'const { Option } = Selectinterface Iprops { data: Idata[] setData: any}interface Idata { nickNameId: number | undefined nameId: number | undefine

下面我们通过一个实例，来理解下 useMemo的用法。父组件function App() { const [name, setName] = useState('名称') const [content,setContent] = useState('内容') return ( <> <button onClick={() => setName(new Date().getTime())}>name</button>

在react中，修改状态如果直接使用this.state，不会引起组件的重新渲染，需要通过 this.setState来对组件的属性进行修改。1、this.setState的两种定义方式定义初始状态state = { count: 0 },如果此时有一个按钮，点击按钮让计数加1，我们可以有两种写法(1)传递对象 this.setState({ count: this.state.count + 1})(2)传递函数 this.setState((state, props) =>.

useEffect的使用componentDidMount()组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染componentWillUnmount ()在此处完成组件的卸载和数据的销毁。clear你在组建中所有的setTimeout,setInterval移除所有组建中的监听 removeEventListenercomponentDidUpdate组件更新完毕后，react只会在第一次初始化成功会进入componentDid

html<Form.Item label="客户姓名" name="customerId" rules={[{ required: true, message: '请选择客户姓名' }]}> <Select placeholder="请选择客户姓名" getPopupContainer={trigger => trigger.parentNode} onChange={onCustomerChange} showSearch onSearch=

import React, { useState } from "react";import { Select } from 'antd';// 省市二级联动组件const { Option } = Select;const provinceData = ['安徽', '澳门', '北京', '福建', '甘肃', '广东', '广西', '贵州', '海南', '河北', '河南', '黑龙江', '湖北', '湖南', '吉林', '江苏', '江西', '辽宁', '内蒙古', '宁夏',

react-custom-scrollbars官网安装npm install react-custom-scrollbars --save使用import React from 'react';import { Scrollbars } from 'react-custom-scrollbars';const Demo: React.FC = () => { return( <> <Scrollbars style={{ height:

官网1、安装npm install mobxnpm install mobx-react2、mobx要点1、定义状态并使其可观察可定义任何数据类型变量import {observable} from 'mobx';var appState = observable({ timer: 0});2、创建视图以响应状态当 appState 中相关数据发生改变时视图会自动更新。import {observer} from 'mobx-react';@observercl

1、不与后端接口联调，使用插件xlsx-oc插件安装npm i xlsx-oc使用，实例import React, { useState, useEffect } from 'react'import { Button, message, Table } from 'antd';import { exportExcel } from 'xlsx-oc'interface PostData { current: number pageSize: number com

Hook是什么一组钩子函数的集合功能：增强了函数组件的功能状态生存周期hook不能提供所有的生命周期的功能引用其它功能，可以自定义hookhook的使用class组件 功能齐全，但使用麻烦 状态、生存周期、引用函数组件+hook 功能齐全，而且使用方便 状态、生存周期、引用、其它1、useState和useEffect的使用在使用useState() Hook 时，必须遵循 Hook 的规则仅顶层调用 Hook ：不能在循环，条件，嵌套函数等中调用useState(

react-router可以让跟组件动态的去挂载不同的其它组件，根据用户访问的地址动态的加载不同的组件一、react路由配置1、找到react router官方文档2、安装rect-router-dom npm install react-router-dom —-save3、找到项目的跟组件，引入rect-router-domimport { BrowserRouter ,Link,Route } from "react-router-dom"4、配置路由exact表示严格匹配组件要

子组件Children传值(msg)给父组件Parent父组件import React ,{useState}from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import styles from './Welcome.less';import Child from './Child';export default (): React.ReactNode => { const [msg,s

组件的生命周期组件创建阶段 （只执行一次）componentWillMount() 还未渲染DOMcomponentDidMount() 组件第一次渲染完成，dom节点已生成组件运行阶段 （按需，根据props属性或state状态的改变，有选择性的执行0或多次）componentWillReceiveProps (nextProps) 父组件修改属性时触发，可以修改新属性和状态shouldComponentUpdate(nextProps,nextState) 返回false会阻止rend

1、创建并导出组件(将组件分离为单独文件)函数创建组件import React from 'reactexport default function Hello(){}或function Hello(){}export default Helloclass创建组件class Hello{ //这是类的构造器，每个类中都有一个构造器，没手动创建构造器，就会有一个隐形的构造器，类似 constructor(){} constructor(name,age){

super关键字即可做函数使用，也可做对象使用，两种情况，用法完全不同constructor 是一种用于创建和初始化class创建的对象的特殊方法。（1）super做函数使用class A { constructor() { console.log(new.target.name); // new.target 指向当前正在执行的函数 }}class B extends A{ constructor(){ //构造函数 super() //es6要求，子类的构造函

组件属性propsfunction HelloMessage(props){ return <h1>Hello {props.name}</h1>}const element = <HelloMessage name="China"/>ReactDOM.render( element, document.getElementById('root'));1、在父组件中定义一个函数2、调用子组件时将函数传过去3、子组件通过this.props

组件的组合使用步骤：1)拆分组件: 拆分界面,抽取组件2)实现静态组件: 使用组件实现静态页面效果3)实现动态组件①　动态显示初始化数据②　交互功能(从绑定事件监听开始)问题：数据保存在哪个组件内？看数据是某个组件需要（给它），还是某些组件需要（给共同的父组件）问题：子组件需要改变父组件的状态？子组件不能直接改变父组件的状态，状态在哪个组件，更新状态的行为就在哪个组件组件收集表单数据理解问题: 在react应用中, 如何收集表单输入数据包含表单的组件分类a. 受控组件: 表单

react-router 的理解：react 的一个插件库专门用来实现一个 SPA 应用基于 react 的项目基本都会用到此库SPA 的理解：单页 Web 应用（single page web application，SPA）整个应用只有一个完整的页面点击页面中的链接不会刷新页面, 本身也不会向服务器发请求当点击路由链接时, 只会做页面的局部更新数据都需要通过 ajax 请求获取, 并在前端异步展现路由的理解：什么是路由?　　a. 一个路由就是一个映射关系(key:va

一、库和框架库：小而巧 优点：可以方便的很方便的从一个库切换到另一个库，但代码基本不变框架：大而全 优点：框架提供了一整套的解决方案，所以，在项目中切换到另外的框架比较困难二、react与vue对比组件化方面：1、什么叫模块化是从代码角度进行分析；把一些可复用的代码，抽离为单个模块；便于项目的维护和开发2、什么叫组件化是从ui界面进行分析；把可复用的ui元素，抽离为单独的组件；便于项目的维护和开发3、组件化好处随着项目规模的增大，组件越来越多，方便把现有组件拼接成完整项目4、vue