weixin_44119268的博客

生命周期就像是人的一生，在特定的时候担任特定的角色。本文介绍的是旧版本react的生命周期从图中可以看出，生命周期可以分为初始化阶段、更新阶段和组件卸载阶段初始化阶段constructor() // 构造器componentWillMount() // 组件将要挂载的钩子render()componentDidMount() // 组件挂载完毕的钩子16.3版本后componentWillMount改名为UNSAFE_componentWillMount在以后的版本可能后清除.

React项目是使用yarn eject暴露配置文件，需要按需加载antd组件样式，并且使用.less文件。需要在配置文件中设置。运行yarn add less less-loader添加less和less-loader需要把less的版本降低到2.7.3版本，否则在运行项目中可能会报错yarn add [email protected]降低版本号在webpack.config.js文件中...

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指向方法一

使用 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

原生js的事件都是全小写，如：onclick等react的事件都是小驼峰，如：onClickreact的事件与原生js的事件驼峰名，一一对应class Demo extends React.Component{ handleMe = (event) => { console.log(event.target) alert("点击事件"); } render(){ return ( // 原生点击事件是 onclick， react是onClick <div.

react 三大属性值之一props，获取标签属性上的属性值，函数组件和class组件都有这个属性。函数组件简单的使用function Demo(props){ return ( // 获取标签上传入的name属性值 <div>我是：{props.name}</div> )}ReactDOM.render(<Demo name="Tom" />, document.getElementById("app))限制传入属性值得类型和默认值.

jsx 语法规则定义虚拟DOM时，不要写引号const VDom = ( <h1>定义虚拟DOM时，不需要引号</h1>)标签中混入JS表达式要用{}注意：这里是JS 表达式 ，不是JS语JS语句与JS表达式的区别：表达式会产生一个值，可以放在任何一个需要值得地方。const data = ['Angular','React','Vue'];const VDom = ( <div> <h1&gt

react 三大属性值refs, 在没有hooks出现之前，只有class 有refs。请勿过度使用refsrefs 绑定方式字符串方式(不建议使用)在未来版本可能会被移除class Demo extends React.Component { getInput = () => { const {input} = this.refs; alert(input.value); } render(){ return ( <div> <inp.

生命周期就像是人的一生，在特定的时候担任特定的角色。本文介绍的是新版本react的生命周期新版的生命周期删除了旧版生命周期中的componentWillMount、componentWillUpdate和componentWillReceiveProps三个钩子，新增了getDerivedStateFromProps和getSnapshotBeforeUpdate两个钩子。初始化阶段constructor() // 构造器getDerivedStateFromProps() // stat.

react 三大属性之state(状态)，是react中非常重要的属性，在复杂组件中经常用到。Hooks 还没有出现之前，只有class组件有state属性，函数组件没有stateconstructor (构造器)初始化stateclass Demo extends React.Component{ constructor(props){ super(props); // 将state绑定到Demo的实例，并初始化a的状态 this.state = { a: '1' }..