React
饭啦啦
这个作者很懒,什么都没留下…
展开
-
Vue和React 如何正常渲染一段HTML字符串
解析data对象中带有标签的des字段1.react的方法:dangerouslySetInnerHTMl 属性<div dangerouslySetInnerHTML = {{__html:返回的html代码片段}} ></div><div dangerouslySetInnerHTML = {{__html:data.des}} ></div&...原创 2019-07-10 14:26:17 · 1300 阅读 · 0 评论 -
React处理事件
在回调函数中使用箭头函数优势:很容易让人看懂。缺点:在每次render时候,都会产生一个匿名函数。如果此组件作为一个子组件,那么父组件render的时候,子组件也可能会重新渲染,消耗性能。class ToggleBtn extends React.component{ constructor(){ super(); this.state = { isToggleOn:tru...原创 2019-11-19 14:55:10 · 86 阅读 · 0 评论 -
React的生命周期
生命周期顺序装载过程(组件第一次在DOM树中渲染的过程)constructor(常用) → getInitialState(v16.0已废除) → getDefaultProps(v16.0已废除)→ componentWillMound(17.0将废除)→getDerivedStateFromProps(v16.3新增,并在v16.4中升级优化了一下)→ render(必要)→compone...原创 2019-11-21 10:14:50 · 113 阅读 · 0 评论 -
React高阶组件和高阶函数
高阶组件(HOC)是react中对组件逻辑进行重用的高级技术,但高阶组件本身并不是react API,它只是一种模式,这种模式是由react自身组合性质必然产生的具体而言,高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件高阶组件既不会修改input原组件,也不会使用继承复制input原组件的行为。相反,高阶组件是通过将原组件 包裹(wrapping) 在容器组件(cont...原创 2019-11-20 13:42:08 · 1881 阅读 · 0 评论 -
react按需加载asyncComponent&&react-loadable
1.asyncComponent最简单的情况是,我们只需要异步引入视图(容器)组件,不必考虑reducers和state的更新。这时候我们可以构造一个asyncComponent 函数:import { asyncComponent } from 'react-async-component';const AsyncHome = asyncComponent(() =&amp;gt; impor...原创 2019-02-12 15:06:39 · 988 阅读 · 0 评论 -
在React中使用react-router-dom路由
使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由。在React中,常用的有两个包可以实现这个需求,那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。安装首先进入项目目录,使用npm安装react-router-dom:npm install react-router-dom --save-dev...原创 2019-02-13 11:09:02 · 767 阅读 · 0 评论 -
多层级数组查找所有的父类名称 js
// 查找名称//data是数组数据 family_tree所有父类id id当前idfindName = (id,family_tree,data) =&amp;amp;amp;gt;{// console.log(data)let name=’’let item = ‘’if (family_treenull||family_tree’’){item = this.findItem(data...原创 2019-01-14 14:21:09 · 2756 阅读 · 0 评论 -
多层级数组递归方法查出兄弟id
// 上下移动handleUp = (item,index) =&amp;amp;gt;{const {initDataList,handleMoveItem,WORD} = this.props;if(index=0){return}let b = this.sibingsId(initDataList,item.id)[index-1]let setData = {src :item.id,...原创 2019-01-14 14:34:27 · 1155 阅读 · 1 评论