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 · 1385 阅读 · 0 评论 -
React处理事件
在回调函数中使用箭头函数 优势:很容易让人看懂。 缺点: 在每次render时候,都会产生一个匿名函数。如果此组件作为一个子组件,那么父组件render的时候,子组件也可能会重新渲染,消耗性能。 class ToggleBtn extends React.component{ constructor(){ super(); this.state = { isToggleOn:tru...原创 2019-11-19 14:55:10 · 99 阅读 · 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 · 131 阅读 · 0 评论 -
React高阶组件和高阶函数
高阶组件(HOC)是react中对组件逻辑进行重用的高级技术,但高阶组件本身并不是react API,它只是一种模式,这种模式是由react自身组合性质必然产生的 具体而言,高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件 高阶组件既不会修改input原组件,也不会使用继承复制input原组件的行为。相反,高阶组件是通过将原组件 包裹(wrapping) 在容器组件(cont...原创 2019-11-20 13:42:08 · 1924 阅读 · 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 · 1019 阅读 · 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 · 784 阅读 · 0 评论 -
多层级数组查找所有的父类名称 js
// 查找名称 //data是数组数据 family_tree所有父类id id当前id findName = (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 · 2793 阅读 · 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 · 1197 阅读 · 1 评论