随笔分类 -  前端/React

react相关
报错/Warning: You should not use <Route component> and <Route children> in the same route; <Route component> will be ignored
摘要：这个报错在以下情形会出现 第一种 <Switch> <Route exact path="/home/index" component={HomeIndex} /> <Route path="/home/order" component={HomeOrder}> <Route path="/home 阅读全文
posted @ 2019-11-20 18:56 LiangM 阅读(2085) 评论(0) 推荐(0)
React/事件系统
摘要：React基于虚拟DOM实现了一个合成事件层，我们所定义的事件处理器会接收到一个合成事件对象的实例事件处理。 并且所有事件都自动绑定在最外层上。如果需要访问原生事件对象，可以使用nativeEvent属性。 React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同: React 事 阅读全文
posted @ 2019-11-20 09:50 LiangM 阅读(297) 评论(0) 推荐(0)
React/react相关小结
摘要：React React组件由React元素组成，React组件使用React.Component或React.PureComponent来生成；React元素使用JSX的语法来编写或使用React.createElement()来生成； Redux action是一个对象，其中type字段是必须的。 阅读全文
posted @ 2019-11-19 14:30 LiangM 阅读(192) 评论(0) 推荐(0)
React/动态绑定class
摘要：第一种 字符串拼接 <i className={["iconfont"+" "+item.icon]} ></i> 第二种 有判断条件的 <i className={["iconfont ",isRed ?item.icon :'' ].join('')} ></i> 第三种 使用ES6 模板字符串 阅读全文
posted @ 2019-11-09 10:29 LiangM 阅读(4599) 评论(0) 推荐(0)
React/高阶组件
摘要：受控组件 在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。但是在react中，组件的状态都是放在state中维护的，所以受控组件指的是，受react内部状态（state）控制的组件(表单元素) 阅读全文
posted @ 2019-11-06 08:37 LiangM 阅读(237) 评论(0) 推荐(0)
React/组件通信
摘要：组件通信可以分为以下几种： 父组件向子组件通信 子组件向父组件通信 跨级组件的通信及context 没有嵌套关系的组件通信 父组件向子组件通信 父组件通过props向子组件传递需要的信息。 子组件向父组件通信 子组件调用porp中传来的父组件的方法达到通信的目的 跨级组件的通信 Context 提供 阅读全文
posted @ 2019-11-01 13:58 LiangM 阅读(230) 评论(0) 推荐(0)
React/Refs and this DOM
摘要：Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 何时使用Refs 管理焦点，文本选择或媒体播放。 触发强制动画。 集成第三方 DOM 库。 避免使用 refs 来做任何可以通过声明式实现来完成的事情。（比如：避免在 Dialog 组件里暴露  阅读全文
posted @ 2019-10-31 17:04 LiangM 阅读(356) 评论(0) 推荐(0)
React/数据流
摘要：“Props” 当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。 props的只读性 组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。 组件可以接受任意 prop 阅读全文
posted @ 2019-10-31 15:21 LiangM 阅读(221) 评论(0) 推荐(0)
React/组件
摘要：组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。所以当在动手写代码之前，要分析UI，如何划分组件是一个需要在动手之前想清楚的问题，最重要的就是独立以及可复用。独立代表不会影响到其他组件，可复用代表省去了很多重复工作量，所以这两部分在划分组件的时候要重点思考。 组件，从概念上 阅读全文
posted @ 2019-10-31 13:43 LiangM 阅读(247) 评论(0) 推荐(0)
React/生命周期
摘要：每个组件都包含“生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。 挂载 当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下： constructor() static getDerivedStateFromProps() render() componentD 阅读全文
posted @ 2019-10-31 08:18 LiangM 阅读(372) 评论(0) 推荐(0)
React/虚拟DOM
摘要：在说虚拟DOM之前，先来一个引子,从输入url到展现出整个页面都有哪些过程? 1、输入网址 2、DNS解析 3、建立tcp连接 4、客户端发送HTPP请求 5、服务器处理请求 6、服务器响应请求 7、浏览器展示HTML 8、浏览器发送请求获取其他在HTML中的资源。 其中浏览器展示HTML经过了：构 阅读全文
posted @ 2019-10-30 15:14 LiangM 阅读(507) 评论(0) 推荐(0)
React/JSX简介
摘要：JSX就是Javascript和XML结合的一种格式。是一个 JavaScript 的语法扩展。 React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。 JSX，是一个 JavaScript 的语法扩展。JSX 可以很好地描述 阅读全文
posted @ 2019-10-30 11:40 LiangM 阅读(668) 评论(0) 推荐(0)