- 博客(20)
- 收藏
- 关注
RSS订阅原创 滚动列表流加载分页数据 import InfiniteLoading from 'vue-infinite-loading'
<template> <!--<ul--> <!--v-infinite-scroll="findLogList"--> <!--infinite-scroll-disabled="loading"--> <!--infinite-scroll-distance="10"&
2018-08-31 17:14:36
388
原创 滚动下拉数据分页 infinite-scroll
<template> <div > <ul class="log_list" ref="viewBox" style="height: 100%;overflow:scroll"> <li class="item_cont" v-for="item in pullList" :key=
2018-08-31 10:05:17
625
原创 react native 页面导航及深入理解属性 以及自适应两个平台
APP从一个界面进入另一个界面 称为导航从界面A到界面B到界面C 称为途径0.44版本之前使用navigator组件（对原生线程级动画不支持）写导航 0.44版本之后使用react-navigation组件实现导航TextInput 在android上不用设置高度 但是在ios上必须设置高度Platform API来进行判断所在平台import{Platform} fr...
2018-08-30 11:44:26
136
原创 前端性能优化
性能指标白屏时间、首屏渲染时间、首次交互时间、出错率、APDEXhttp://doc.tingyun.com/browser/html/yemianjiancexiangguanzhibiao.html性能查看工具 工具 链接地址 备注 特点 Lighthouse ...
2018-08-30 11:44:07
140
原创 前端单例模式的应用场景
单例模式的定义是：保证一个类仅有一个一个实例，并提供一个访问它的全局访问点。单例模式能在合适的时候创建对象，并且创建唯一的一个。代码接近于生活，很有意思。比如一个网站的登录，点击登录后弹出一个登录弹框，即使再次点击，也不会再出现一个相同的弹框。又或者一个音乐播放程序，如果用户打开了一个音乐，又想打开一个音乐，那么之前的播放界面就会自动关闭，切换到当前的播放界面。这些都是单例模式的应用场景。...
2018-08-30 11:23:25
4317
原创 跨域携带cookie
header("Access-Control-Allow-Credentials: true");header("Access-Control-Allow-Origin: http://www.xxx.com");服务端配置前端配置原生ajax请求方式：var xhr = new XMLHttpRequest(); xhr.open("POST", "http://xxx...
2018-08-28 16:37:10
277
原创 react 思想 划分组件 以及state的判断
在这里你会看到，我们的简单应用中有5个组件。我们把每个组件展示的数据用斜体表示。FilterableProductTable (橙色): 包含了整个例子 SearchBar (蓝色): 接受所有的用户输入 ProductTable (绿色): 根据用户输入过滤并展示数据集合 ProductCategoryRow (绿松石色): 展示每个分类的标题 ProductRow (红色...
2018-08-24 11:48:06
312
原创 组合vs继承
1 通过children 传递domchildren 属性将子元素直接传递到输出。function FancyBorder(props) { return ( <div className={'FancyBorder FancyBorder-' + props.color}> {props.children} </div> );}...
2018-08-24 11:36:21
165
原创 react 状态提升的总结
React在DOM原生组件<input>上调用指定的onChange函数。在本例中，指的是TemperatureInput组件上的handleChange函数。 TemperatureInput组件的handleChange函数会在值发生变化时调用this.props.onTemperatureChange()函数。这些props属性，像onTemperatureChange都是由父...
2018-08-24 10:58:13
641
原创 将博客搬至CSDN
陪伴了大家12年，是时候说再见了。 自2006年上线以来，我们陪伴着大家一起记录了那些闪闪发光的日子。每个人，每件事，每个故事，每种情怀，皆是生命中无数次回眸的遇见。 很荣幸陪伴大家十几年。跟你们一样，说出“再见”，我们同样万分不舍。但天下无不散之宴席，光阴和时代推动着我们每个人，唯有不停前行。 我们本来想按照惯例悄悄公告，默默下线，没想到收到如此多的惦念与不舍。从2017年在网易博客写第一...
2018-08-24 10:16:30
120
原创 react状态提升 两个子组件状态共享 让子组件状态提升 通过公有父组件props的方法传递回调函数执行改变（ handleChange(e) { // 之前的代码: this.setSt）
使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。我们来看一下具体如何操作吧子组件执行受控handleChange 修改input输入 真正受控是在父组件的回调函数中进行的们想要的是这两个输入能保持同步。当我们更新摄氏输入（Celsius）时，华氏度（Fahrenheit ）这个框应该能显示转换后的的温度数...
2018-08-23 21:23:54
2732
原创 react 表单使用受控组件的思想
当用户提交表单时，HTML的默认行为会使这个表单跳转到一个新页面。在React中亦是如此。但大多数情况下，我们都会构造一个处理提交表单并可访问用户输入表单数据的函数。实现这一点的标准方法是使用一种称为“受控组件”的技术。在HTML当中，像<input>,<textarea>, 和 <select>这类表单元素会维持自身状态，并根据用户输入进行更新。但在Rea...
2018-08-23 20:59:52
389
原创 react jsx中使用map
function NumberList(props) { const numbers = props.numbers; return ( <ul> {numbers.map((number) => <ListItem key={number.toString()} value={number}...
2018-08-23 20:42:26
4687
原创 react 基础列表组件
function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li>{number}</li> ); return ( <ul>{listItems}</ul> )...
2018-08-23 20:41:45
979
原创 react 数组map方法转化列表
const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => <li>{number}</li>);我们把整个listItems插入到ul元素中，然后渲染进DOM:ReactDOM.render( <ul>{listItems}</ul>...
2018-08-23 20:32:59
4694
原创 react 隐藏组件 阻止渲染
在下面的例子中，<WarningBanner /> 根据属性 warn 的值条件渲染。如果 warn 的值是 false，则组件不会渲染：function WarningBanner(props) { if (!props.warn) { return null; } return ( <div className="warning">...
2018-08-23 20:05:19
2536
原创 react 三元运算符的使用
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginBu...
2018-08-23 19:56:06
5124
原创 react条件渲染 &&
function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2>...
2018-08-23 19:52:35
1306
原创 react 有状态组件 切换登陆和未登录状态以及UI展示
在下面的例子中，我们将要创建一个名为 LoginControl 的有状态的组件。它会根据当前的状态来渲染 <LoginButton /> 或 <LogoutButton>，它也将渲染前面例子中的 <Greeting />。class LoginControl extends React.Component { constructor(props) ...
2018-08-23 19:09:53
2046
原创 react 向事件处理程序传递参数
通常我们会为事件处理程序传递额外的参数。例如，若是 id 是一个内联 id，以下两种方式都可以向事件处理程序传递参数：<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button><button onClick={this.deleteRow.bind(this, id)}>De...
2018-08-23 19:00:25
2734
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人