react
文章平均质量分 87
泥猴桃
web前端开发
展开
-
react 新版生命周期
React16 之后有三个生命周期被废弃(但并没有删除)componentWillMountcomponentWillReceivePropscomponentWillUpdate官方计划在17版本完全删除这三个函数,只保留UNSAVE_前缀的三个函数,目的是为了向下兼容,但是对于开发者而言应该尽量避免使用他们,而是使用新增的生命周期函数替代它们。目前React 16.8+ 的生命周期氛围三个阶段,分别是挂载阶段,更新阶段,卸载阶段挂载阶段constructor: 构造函数,最先被执原创 2021-02-23 19:57:29 · 702 阅读 · 0 评论 -
react 高阶组件
react 高阶组件源码连接1、高阶函数在学习之前首先说一下高阶函数的基本概念:函数可以作为参数被传递函数可以作为返回值输出像平时js 中我们用到的以下这些都是 高阶函数setTimeout(() => { console.log(1)}, 1000)setInterval(() => { console.log(1)z}, 1000)function foo (x) { return function () { return x }}/原创 2020-12-25 23:21:44 · 235 阅读 · 0 评论 -
React创建组件的三种方法
无状态函数式组件创建纯展示组件,只负责根据传入的props 来展示,不涉及到要state 状态的操作,是一个只带有一个render 方法的组件类创建形式如下:function HelloComponent(props) { return <div>Hello {props.name}</div>}ReactDOM.render(<HelloCompone...转载 2018-11-07 22:43:32 · 1243 阅读 · 0 评论 -
react报错 TypeError: Cannot read property 'setState' of undefined
代码如下:class test extends Component { constructor(props) { super(props); this.state = { liked: false }; } handleClick(event) { this.setState({lik...转载 2018-11-07 21:55:59 · 3242 阅读 · 0 评论 -
react-router中,<switch>标签存在意义说明
有标签 <BrowserRouter> <div> <div> <ul> <li> <L...原创 2018-10-24 21:38:49 · 1752 阅读 · 0 评论 -
React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况:1 父组件向子组件通信 2 子组件向父组件通信父组件向子组件通信 这是最简单也是最常用的一种通信方式:父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理。 下面是演示代码:父组件 App.js:import React,{ Component } from "reac原创 2018-04-17 20:33:29 · 988 阅读 · 0 评论 -
componentWillMount 和 componentDidMount的区别
1、componentWillMount 将要装载,在render之前调用; componentDidMount,(装载完成),在render之后调用2、componentWillMount 每一个组件render之前立即调用; componentDidMount render之后并不会立即调用,而是所有的子组件都render完之后才可以调用3、componentWillMount原创 2018-04-09 21:56:51 · 2335 阅读 · 0 评论 -
react jsx 中的map 循环嵌套
jsx 中map 用的非常多,嵌套用到的也会很多!废话不多说,直接上代码var btnType=Object.keys(obj).map((key,i)=>{ var item=obj[key].map((s,index)=>{ return ( <button className={styles.btnType} key={index}>{obj[k原创 2018-04-09 21:53:48 · 7209 阅读 · 0 评论 -
jsx 语法中使用 if else
在react中用jsx渲染dom的时候经常会遇到if条件判断,然而在jsx中竟是不允许if条件判断的。以下有几种判断方式,可以根据自己的应用场景,挑选适合的 方案一:class HelloMessage extends React.Component { render (){ let userMessage; if (this.props.loggedIn) { ...原创 2018-04-09 21:52:03 · 16424 阅读 · 0 评论