React
huyao_road
20多岁,有30年Web开发经验。
展开
-
为什么不可变性在React当中非常重要
在上一节内容当中,我们通过使用 .slice() 方法对已有的数组数据进行了浅拷贝,以此来防止对已有数据的改变。接下来我们稍微了解一下为什么这样的操作是一种非常重要的概念。改变应用数据的方式一般分为两种。第一种是直接修改已有的变量的值。第二种则是将已有的变量替换为一个新的变量。直接修改数据var player = {score: 1, name: 'Jeff'};player.score = 2...转载 2018-02-26 21:02:23 · 1538 阅读 · 1 评论 -
在antd的标签组件中做路由跳转
使用react-router-dom在组件中可以很方便的使用 Link 标签进行路由跳转。但是我碰到了这样的情况 Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.意思是不能再 <a>标签中重复的出现<a>标签。 显然antd的组件...原创 2018-11-18 17:10:18 · 11432 阅读 · 0 评论 -
为什么React事件处理函数必须使用Function.bind()绑定this?
转载自:http://www.cnblogs.com/DM428/p/7777539.html最近在React官网学习Handling Events这一章时,有一处不是很明白。代码如下:class Toggle extends React.Component { constructor(props) { super(props); this.state = {isTo...转载 2018-09-29 15:05:59 · 2154 阅读 · 0 评论 -
React中的性能优化点
1. 在constructor中绑定事件函数的this指向把一个函数赋值给一个变量,然后用那个变量去执行函数会造成this的丢失,所以需要绑定this,把绑定放在构造函数中可以保证只绑定一次函数,如果放在render函数中绑定this的话每次渲染都会去绑定一次this,那样是很耗费性能的。2. 使用箭头函数也就是异步函数的方式写setStatesetState它是一个异步函数,他会合并...原创 2018-10-04 10:25:48 · 306 阅读 · 0 评论 -
React生命周期函数
生命周期函数指在某一时刻组件会自动调用执行的函数 React生命周期挂载时的生命周期componentWillMount // 在组件第一次被挂载到页面前的时刻执行componentDidMount // 在组件第一次被挂载到页面后的时刻执行更新时的生命周期shouldComponentUpdate () { return boolenValue } // 组件被更...原创 2018-10-03 20:56:23 · 687 阅读 · 0 评论 -
React中的视图更新与虚拟DOM
React中的视图更新过程1. state 数据2. JSX 模板3. 用虚拟DOM的结构,生成真实的DOM ['div', {id: 'abc'}, ['span', {}, 'Hello']]4. 用虚拟DOM的结构,生成真实的DOM <div id="abc"><span>Hello!</span></div>5...原创 2018-10-03 19:31:02 · 1154 阅读 · 0 评论 -
diff算法中的概念
合并多次setStatesetState被设计为一个异步的方法,目的是为了提升React底层的性能。假设我们短时间内连续变更3次state,React就会把这3次setState合并为一次setState,只做一次VDOM的比对,提高了整体的性能。同级比较diff算法会从根节点开始,一层层的向下比较,如果在某一层的某个节点发现不同了,他就会直接替换这个节点下面的所有子树。k...原创 2018-10-03 19:28:01 · 4502 阅读 · 0 评论 -
react+dva+antd -- 创建一个新页面需要做以下步骤dva-example-user-dashboard
创建一个新页面需要做以下步骤 1. 在/src/models/中以模块名(小写)建立一个model 注册model及命名空间export default { namespace: 'users', state: { }, reducers: { }, effects: { }, //监听, 当进入这一页的时候 subscription...原创 2018-02-24 17:50:01 · 3210 阅读 · 1 评论 -
如何快速学习理解Redux
拿一个完整的Redux项目来直接看是很痛苦的,因为它将项目各个模块都分到了对应的文件夹中,通过export和import来进行数据交互,这样在新手和ES6不熟悉的情况下是很容易就懵掉的. 而我也在曲折的学习路线中找到了一个自认为不错的方法 知道redux中具体分了哪些模块, 了解每一个模块的特征和功能 始终记住为什么Redux要分为这几个模块, redux其实是...原创 2018-01-19 11:27:20 · 357 阅读 · 0 评论 -
为什么函数定义组件中不能打括号
事件处理函数的写法,这里我们把 onClick={() => props.onClick()} 直接修改为 onClick={props.onClick} , 注意不能写成 onClick={props.onClick()} 否则 props.onClick 方法会在 Square 组件渲染时被直接触发而不是等到 Board 组件渲染完成时通过点击触发,又因为此时 Board 组件正在渲染中...转载 2018-02-26 21:11:01 · 424 阅读 · 0 评论 -
antd-mobile Picker value 属性不生效
const entranceTimeOptions = [ { value: '2018', label: '2018' }, { value: '2017', label: '2017' }, { value: '2016', label: '2016' }, { value: '2015', label: '2015' }]<Picker data...原创 2018-12-03 18:17:25 · 6558 阅读 · 0 评论