![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
react技术专栏
小达学徒
小白代码搬运工,前端苦行憎
展开
-
react学习之生命周期(一)旧版本16.8以前
生命周期就像是人的一生,在特定的时候担任特定的角色。本文介绍的是旧版本react的生命周期从图中可以看出,生命周期可以分为初始化阶段、更新阶段和组件卸载阶段初始化阶段constructor() // 构造器componentWillMount() // 组件将要挂载的钩子render()componentDidMount() // 组件挂载完毕的钩子16.3版本后componentWillMount改名为UNSAFE_componentWillMount在以后的版本可能后清除.原创 2021-04-26 23:07:58 · 451 阅读 · 0 评论 -
React 项目暴露webpack配置文件按需加载antd+less+自定义主题
React项目是使用yarn eject暴露配置文件,需要按需加载antd组件样式,并且使用.less文件。需要在配置文件中设置。运行yarn add less less-loader添加less和less-loader需要把less的版本降低到2.7.3版本,否则在运行项目中可能会报错yarn add less@2.7.3降低版本号在webpack.config.js文件中...原创 2019-09-24 11:26:51 · 638 阅读 · 1 评论 -
react学习之class中this
class Demo extends React.Component{ handle(){ console.log(this) } render(){ return ( <div onClick={this.handle}>点击我</div> ) }}控制台会显示undefined。因为在class中,自定义方法会自动加上局部的use strict,所以this不能指向window,值为undefined。解决class中方法的this指向方法一原创 2021-04-26 22:37:27 · 336 阅读 · 0 评论 -
不暴露 create react app 的webpack配置下,修改webpack配置
使用 react-app-rewiredreact-app-rewired 传送门安装 react-app-rewirednpm install react-app-rewired --save-dev项目根目录创建 onfig-overrides.js/* config-overrides.js */module.exports = function override(config, env) { //do stuff with the webpack config... retur原创 2021-12-24 17:43:01 · 1041 阅读 · 0 评论 -
react学习之事件处理
原生js的事件都是全小写,如:onclick等react的事件都是小驼峰,如:onClickreact的事件与原生js的事件驼峰名,一一对应class Demo extends React.Component{ handleMe = (event) => { console.log(event.target) alert("点击事件"); } render(){ return ( // 原生点击事件是 onclick, react是onClick <div.原创 2021-04-25 21:42:19 · 54 阅读 · 0 评论 -
react学习之props
react 三大属性值之一props,获取标签属性上的属性值,函数组件和class组件都有这个属性。函数组件简单的使用function Demo(props){ return ( // 获取标签上传入的name属性值 <div>我是:{props.name}</div> )}ReactDOM.render(<Demo name="Tom" />, document.getElementById("app))限制传入属性值得类型和默认值.原创 2021-04-25 20:04:49 · 168 阅读 · 0 评论 -
react学习之JSX
jsx 语法规则定义虚拟DOM时,不要写引号const VDom = ( <h1>定义虚拟DOM时,不需要引号</h1>)标签中混入JS表达式要用{}注意:这里是JS 表达式 ,不是JS语JS语句与JS表达式的区别:表达式会产生一个值,可以放在任何一个需要值得地方。const data = ['Angular','React','Vue'];const VDom = ( <div> <h1>原创 2021-04-14 22:37:22 · 64 阅读 · 0 评论 -
react学习之refs
react 三大属性值refs, 在没有hooks出现之前,只有class 有refs。请勿过度使用refsrefs 绑定方式字符串方式(不建议使用)在未来版本可能会被移除class Demo extends React.Component { getInput = () => { const {input} = this.refs; alert(input.value); } render(){ return ( <div> <inp.原创 2021-04-25 21:29:25 · 84 阅读 · 0 评论 -
react学习之生命周期(二)新版本17
生命周期就像是人的一生,在特定的时候担任特定的角色。本文介绍的是新版本react的生命周期新版的生命周期删除了旧版生命周期中的componentWillMount、componentWillUpdate和componentWillReceiveProps三个钩子,新增了getDerivedStateFromProps和getSnapshotBeforeUpdate两个钩子。初始化阶段constructor() // 构造器getDerivedStateFromProps() // stat.原创 2021-04-26 23:26:17 · 90 阅读 · 0 评论 -
react学习之state
react 三大属性之state(状态),是react中非常重要的属性,在复杂组件中经常用到。Hooks 还没有出现之前,只有class组件有state属性,函数组件没有stateconstructor (构造器)初始化stateclass Demo extends React.Component{ constructor(props){ super(props); // 将state绑定到Demo的实例,并初始化a的状态 this.state = { a: '1' }..原创 2021-04-21 22:24:05 · 66 阅读 · 0 评论