react
码代码的程序员
这个作者很懒,什么都没留下…
展开
-
react hook中的useState的第二个参数是异步的
useState的异步更新 const [list, setlist] = useState([0]); function change(){ setlist([22, 1]) console.log(list) //我想这里直接获得[22,1],但是拿到的是[0] }useState每次执行会返回一个新的state(简单类型的等值拷贝)setState会触发UI更新(重新render,执行函数组件)由于UI更新是异步任务,所以setState也是一个异步过程解决方原创 2021-01-23 17:17:50 · 6801 阅读 · 1 评论 -
antd中的一些坑
在写自定义校验的时候,不管是if/else一定要有返回值,要不然点击提交按钮获取不了表单的数据 ({ getFieldValue }) => ({ validator(_, value) { let confirmPasswords = getFieldValue('password') if (value) { if (confir原创 2021-01-15 00:34:51 · 523 阅读 · 0 评论 -
react中按需引入antd(不需要eject暴露环境)
1.安装模块cnpm i customize-cra --save-dev2.在package.json的同级目录中新建一个config-overrides.js文件const { fixBabelImports } = require("customize-cra");module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', sty原创 2021-01-11 00:15:46 · 322 阅读 · 0 评论 -
react配置sass全局变量(不需要eject暴露环境)
1.安装3个模块:cnpm install react-app-rewired customize-cra sass-resources-loader --save-dev2.在package.json的同级目录中新建一个config-overrides.js文件const { override, adjustStyleLoaders } = require("customize-cra");module.exports = override( // fixBabel原创 2021-01-11 00:10:28 · 1023 阅读 · 0 评论 -
react生命周期的一些个人理解(16.3+)
react生命周期的一些更新React V16.3 新增的生命周期方法getDerivedStateFromProps()getSnapshotBeforeUpdate()逐渐废弃的生命周期方法:componentWillMount()componentWillReceiveProps()componentWillUpdate()虽然废弃了这三个生命周期方法,但是为了向下兼容,将会做渐进式调整。V16.3 并未删除这三个生命周期,同时还为它们新增以 UNSAFE_ 前缀为别名的三个函数原创 2020-12-23 00:40:24 · 196 阅读 · 0 评论 -
react中的关于 setState() 你应该了解三件事
不要直接修改 State// Wrongthis.state.comment = 'Hello';而是应该使用 setState():this.setState({comment: 'Hello'});this.setState()构造函数是唯一可以给 this.state 赋值的地方State 的更新可能是异步的出于性能考虑,React 可能会把多个 setState() 调用合并成一个调用。因为 this.props 和 this.state 可能会异步更新,所以你不要依赖他们的值来原创 2020-12-22 10:07:47 · 446 阅读 · 0 评论 -
React onClick点击事件传参三种写法
1.<Button onClick={this.delFolder.bind(this,"xxx")}></Button>定义delFolder方法delFolder = (name,e)=>{alert(name)}2.<Button onClick={this.delFolder("abc")}></Button>定义delFolder方法delFolder = (name)=>{return (e原创 2020-11-27 17:17:26 · 5361 阅读 · 0 评论 -
使用 create-react-app 快速构建 React 开发环境
create-react-app 自动创建的项目是基于 Webpack + ES6 。执行以下命令创建项目:$ cnpm install -g create-react-app$ create-react-app 想要创建的项目名 (创建一个react脚手架)$ cd 项目名(进入创建的文件夹)$ npm start(运行项目)...原创 2018-11-02 00:41:02 · 525 阅读 · 0 评论