随笔分类 -  react

1 2 下一页
react-loadable 实现 路由懒加载
摘要：// 路由懒加载 yarn add react-loadable 1 loadable.js import React from 'react'; import Loadable from 'react-loadable'; const LoadableComponent = Loadable({ 阅读全文
posted @ 2021-09-08 10:37 13522679763-任国强 阅读(85) 评论(0) 推荐(0)
react-笔记
摘要：Fragment 占位符标签 使用方法 class => className className="input" {/* 注释内容 */}// 注释内容 dangerouslySetInnerHTML={{__html:item}} 可以解析 html 标签 <li key={item} onCli 阅读全文
posted @ 2021-09-02 18:01 13522679763-任国强 阅读(61) 评论(0) 推荐(0)
useState 使用方法
摘要：import React,{useState} from 'react' export default function ComplexHookState() { const [friends, setFriends] = useState(['李雷','科比']) const [students, 阅读全文
posted @ 2021-08-20 17:51 13522679763-任国强 阅读(888) 评论(0) 推荐(0)
配置antd 主题颜色 和 别名
摘要：yarn add antdyarn add @ant-design/iconsyarn add moment // 配置andt 主题yarn add @craco/craco// 修改配置命令 "scripts": { "start": "craco start", "build": "craco 阅读全文
posted @ 2021-08-16 17:45 13522679763-任国强 阅读(474) 评论(0) 推荐(0)
classnames 使用方法
摘要：import React, { PureComponent } from 'react' // yarn add classnames import classNames from 'classnames' export default class app extends PureComponent 阅读全文
posted @ 2021-08-13 17:05 13522679763-任国强 阅读(2154) 评论(0) 推荐(0)
styled-components 使用方法
摘要：yarn add styled-components 1 import styled from 'styled-components' export const HomeWrapper = styled.div ` font-size:20px; color:red; .banner{ backgr 阅读全文
posted @ 2021-08-13 15:01 13522679763-任国强 阅读(154) 评论(0) 推荐(0)
高阶组件应用-生命周期劫持-查看渲染时间
摘要：import React, { PureComponent } from 'react' function withRenderTime(WrappedComponent){ return class extends PureComponent{ componentWillMount() { thi 阅读全文
posted @ 2021-08-13 09:41 13522679763-任国强 阅读(154) 评论(0) 推荐(0)
高阶组件应用-登录鉴权操作
摘要：import React, { PureComponent } from 'react' // class LoginPage extends PureComponent { render() { return ( <div> <h2>LoginPage</h2> </div> ) } } func 阅读全文
posted @ 2021-08-12 17:46 13522679763-任国强 阅读(85) 评论(0) 推荐(0)
(二)高阶组件的应用-增强props
摘要：import React, { PureComponent, createContext } from 'react' import { render } from 'react-dom' // 定义一个高阶组件 function withUser(WrappedComponent){ return 阅读全文
posted @ 2021-08-12 17:20 13522679763-任国强 阅读(67) 评论(0) 推荐(0)
(-)高阶组件的应用-增强props
摘要：import React, { PureComponent } from 'react' // 定义一个高阶组件 function enhanceRegionProps(WrappedComponent){ return props => { return <WrappedComponent {.. 阅读全文
posted @ 2021-08-12 17:19 13522679763-任国强 阅读(35) 评论(0) 推荐(0)
非受控组件（不推荐使用）
摘要：import React, { PureComponent,createRef } from 'react' export default class App extends PureComponent { constructor(props){ super(props) this.username 阅读全文
posted @ 2021-08-12 15:13 13522679763-任国强 阅读(33) 评论(0) 推荐(0)
受控组件 input 和 select
摘要：import React, { PureComponent } from 'react' export default class App extends PureComponent { constructor(props){ super(props) this.state = { username 阅读全文
posted @ 2021-08-12 15:06 13522679763-任国强 阅读(101) 评论(0) 推荐(0)
refs使用方法
摘要：import React, { PureComponent,createRef } from 'react' class Counter extends PureComponent { constructor(props){ super(props) this.state = { counter:0 阅读全文
posted @ 2021-08-12 14:15 13522679763-任国强 阅读(97) 评论(0) 推荐(0)
事件总线 event bus
摘要：import React, { PureComponent } from 'react' import {EventEmitter} from 'events'; // yarn add events // 事件总线 event bus const eventBus = new EventEmitt 阅读全文
posted @ 2021-08-12 11:54 13522679763-任国强 阅读(85) 评论(0) 推荐(0)
PureComponent -性能优化案例
摘要：import React, { PureComponent } from 'react' export default class App extends PureComponent { constructor(props){ super(props) this.state = { friends: 阅读全文
posted @ 2021-08-12 10:54 13522679763-任国强 阅读(57) 评论(0) 推荐(0)
setState 数据合并
摘要：import React, { Component } from 'react' export default class App extends Component { constructor(props){ super(props) this.state = { counter:0, name: 阅读全文
posted @ 2021-08-11 17:29 13522679763-任国强 阅读(230) 评论(0) 推荐(0)
获取同步更新数据的 两种方法
摘要：import React, { Component } from 'react' export default class App extends Component { constructor(props){ super(props) this.state = { counter:0 } } re 阅读全文
posted @ 2021-08-11 17:02 13522679763-任国强 阅读(268) 评论(0) 推荐(0)
setState 获取异步更新数据的两种方法
摘要：import React, { Component } from 'react' export default class App extends Component { constructor(props){ super(props) this.state = { counter:0 } } re 阅读全文
posted @ 2021-08-11 16:33 13522679763-任国强 阅读(327) 评论(0) 推荐(0)
2-跨组件通信-context-类组件
摘要：import React, { Component } from 'react' const userContext = React.createContext({ nickname:'AAA', level:0 }) class ProfileHeader extends Component{ r 阅读全文
posted @ 2021-08-11 14:40 13522679763-任国强 阅读(36) 评论(0) 推荐(0)
1-跨组件通信-props
摘要：import React, { Component } from 'react' // props 从上向下一层一层传递 function ProfileHeader(props){ console.log(props); return ( <div> <h2>用户昵称: {props.nickna 阅读全文
posted @ 2021-08-11 14:27 13522679763-任国强 阅读(45) 评论(0) 推荐(0)

1 2 下一页