发表于
2020-02-25 00:00:00
React 复习笔记（上） · 看不见我的美 · 是你瞎了眼
发表于
2018-09-11 00:00:00
React最佳实践
本文介绍React中一些问题的最佳解决办法，和一些常见的错误用法组件React的组件有好几种，对于一个组件该如何归类，应该遵守如下的顺序：Functional ComponentPureComponentComponent如果一个组件没有自身状态，应该使用Functional Component；如果组件是纯组件（属性都是简单值），那么应该使用PureComponent；否则应该使用Component；Functional ComponentfunctionHello(props){return{props.name}}Hello.propTypes={name:React.PropTypes.string};Hello.defaultProps={name:'yan'};PureComponentclassDemo1extendsComponent{shouldComponentUpdate(nextProps,nextState){const{props,state}=this;functionshallowCompare(a,b){returna===b||Object.keys(a).every(k=>a[k]===b[k]);}returnshallowCompare(nextProps,props)&&shallowCompare;(nextState,state);}
...继续阅读
(55)
发表于
2018-02-09 00:00:00
再谈 ReactDom.render
发表于
2017-06-21 01:12:00
腾讯AlloyTeam正式发布pasition - 制作酷炫Path过渡动画 - 【当耐特】
【摘要】pasition Pasition Path Transition with little JS code, render to anywhere 超小尺寸的Path过渡动画类库 "Github源代码" "在线演示" 最近和贝塞尔曲线杠上了，如 "curvejs" 和 "pasition" 都是贝塞阅读全文
...继续阅读
(17)
发表于
2017-06-05 13:17:27
高性能迷你React框架anu发布
发表于
2017-06-02 02:47:35
React 的 lifecycle(生命周期)
发表于
2017-06-01 02:34:05
react import 问题
我代码如下：
index.jsimport React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import './index.scss';
class App extends Component {
render() {
return (</Header>);
}
}
const app = window.document.getElementById('app');
ReactDOM.render(, app)
;
header.js
```js
import React, { Component } from 'react';
export default class Header extends Component {
render() {
return (fuck
</section>);
}
}两个文件中我必须显式import React而且R必须大写，写成小
...继续阅读
(10)
发表于
2017-05-27 09:51:44
了解State、Props，学会React
State Props——React的关键所在原文《State Props——React的关键所在》只有 State，Props，仅此而已。React 只有 State（状态）、Props（属性），仅此而已。就是这么简单。所以说，如果你会 JS，也了解了 State（状态）和 Props（属性）。那么就可以你已经掌握了 React 大部分知识了。在 State，Props 之前，先来看一下 React 的基础。JSXconst element =Hello, world!</h1>;This funny tag syntax is neither a string nor HTML.It is called JSX, and it is a syntax extension to JavaScript.const element =Hello, world!;这样的表达式就是 JSX 。它是 JavaScript 语法的延伸。在 JSX 中，允许将 JS 代码和 HTML 标签一起使用。这样就可以使用熟悉 JS 来展开逻辑，使用熟悉的 HTML 来呈现 UI。不过这里有一点，就是一个 JSX 只能有一个根节点。所谓一个根节点，就是 HTML 最外面有且只有一个 HTML 标签。const element = (Hello</div>world!)像这样就是错误的
...继续阅读
(4)
发表于
2017-05-17 00:27:12
koa2中csrf的Invalid CSRF token错误，该如何排查？
app.js
// session
app.use(session(app));
// csrf
app.use(new csrf());
// usage
app.use(async (ctx, next) => {
await ctx.render(‘home/index’, {
title: ‘home page’,
content: ‘this is home page’,
csrf: ctx.csrf
});
});在表单页面中有值，但一提前就报Invalid CSRF token错误，该从哪些方面找原因？
...继续阅读
(23)
发表于
2017-05-16 18:41:57
【译】光速 React
原文地址：React at Light Speed原文作者：Jacob Beltran译文出自：掘金翻译计划译者：ZhangFe校对者：yzgyyang,xunge0613光速 ReactVixlet 团队优化性能的经验教训在过去一年多，我们Vixlet的 web 团队已经着手于一个激动人心的项目：将我们的整个 web 应用迁移到 React + Redux 架构。对于整个团队来说，这是不断增长的机遇，而在迁移过程中，我们一路风雨兼程。因为我们的 web-app 可能有非常大的 feed 视图，包括成百上千的媒体、文本、视频、链接元素，我们花了相当多的时间寻找能充分利用 React 性能的方法。在这里，我们将分享我们这一路学到的一些经验教训。声明：下面讲的做法和方法更适用于我们具体应用的性能需求。然而，像所有的开发者建议的那样，最重要的是要考虑到你的应用程序和团队的实际需求。React 是一个开箱即用的框架，所以你可能不需要像我们一样细致地优化性能。话虽如此，我们还是希望你能在这篇文章里找到一些有用的信息。基本原理向更大的世界迈出第一步。render() 函数一般来说，要尽可能少地在 render 函数中做操作。如果非要做一些复杂操作或者计算，也许你可以考虑使用一个memoized函数以便于缓存那些重复的结果。可以看看Lodash.memoize，这是一个开箱即用的记忆函数。反过来
...继续阅读
(7)
发表于
2017-05-08 11:50:11
ajax请求node，怎么访问不到，还错误提示res.render() is not a function;
前台ajax请求：
$.ajax({
type:‘GET’,
url:’/singleGoods/buy’,
data:{
size:size,
count:count
}
success:function(data){
alert(data);
}
});后台测试处理：
//测试ajax返回数据处理
router.get(’/buy’,function(res,req,next){
//var size = req.query.size;
//var count = req.query.count;
res.render(‘数据已经接收到了：size:’);
});错误提示结果：网上查了一些例子，还是这个问题。
...继续阅读
(16)
发表于
2017-04-25 07:41:46
基于webpack + react + react-router + redux + less +antd + ES6 的cnode社区
楼主身为一个非计算机专业的大四学生,目前在学校附近的公司实习,利用工作之余做的第一个redux项目,也是刚刚接触redux 1个月,从最开始的看不懂到现在的能稍微写点东西出来了,希望各位大神觉得哪里做的不好,不足的地方,还请各位批评指正,非常感谢. 同时也是求star!!!项目介绍github地址基于webpack + react + react-router + redux + less + ant + es6 的cnode社区
非常感谢cnode提供的api以及react china社区的各位大神,真的提供了很多的帮助,里面也有很多的例子,都值得去学习运行项目（nodejs 6.0+）git clone https://github.com/zhangfan6644777/Redux-cnode.git
cd Redux-cnode
npm install
npm run dev (开发版本访问：http://localhost:8088/)功能1.登录退出
2.列表分页，下拉自动加载
3.查看帖子,发帖，回复帖子,点赞
4.查看消息
5.个人中心
6.查看别人的资料项目总结1.基本思路就是每个页面对应一个reducerTopic主要是主页的列表信息,上拉加载Article对
...继续阅读
(13)
发表于
2017-04-24 01:55:39
[译]React 元素 vs React 组件 vs 组件支撑实例
本篇为译文，原文出处：React Elements vs React Components vs Component Backing Instances许多人可能听说过 Facebook 的React库，并在自己的工作或项目中使用它。React 是非常流行的，使开发用户界面变得简单且符合声明式编程（译者注：声明式编程可以参考声明式编程和命令式编程的比较）。正如题目所示，React 有几个概念遍及其文档，这（几个概念）可能会让新React用户困惑。例如，你在Glossary、Top-Level API和Explanation on Refs这几章中检索 “React Element”、“React Component” 和 “Component Backing Instance”，你会发现这几个术语遍及各处，已经是 React 的绝对的核心。这篇文章不是一篇 React 的教程，更多的是分享我最近学习 React 而得到的一些（知识）。因此，这篇文章是针对之前已经涉猎过 React 的人们，我会假设你已经熟悉 React 一些核心概念和语法。React元素是什么?React 元素这个概念对于 React 来说很重要，但是我坚信一点，因为使用 React 和 JSX 来构建用户界面过于简单，从而导致可能在最初错过这个概念。如果你之前用过 React + JSX，毫无疑问的说，在你的 J
...继续阅读
(13)
发表于
2017-04-18 09:14:18
关于ajax请求的返回值只能通过ajax请求的回调渲染到前端么？
求大神指点------我用一个ajax请求掉用我服务端的接口，处理完成拿到值之后，想直接用this.render()把数据渲染到前端，为什么没有效果。但是我还有一个接口的返回数据是可以通过this.render()渲染的，只不过这个请求是以表单的方式提交上来的。ajax请求的返回值只能通过ajax请求的回调渲染到前端么？如图：
...继续阅读
(3)
发表于
2017-04-17 20:00:14
[原]《浏览器渲染原理及流程》学习笔记
浏览器完整地呈现一张页面在我们眼帘之前，都做了啥工作？或者说，其步骤为何？答案是构建各种树。所谓的树，那就是有兄弟、子孙等节点了。一棵树构造出来，各种元素的先后顺序就都有了。有哪些树呢？这些树：DOM Tree：浏览器将HTML解析成树形的数据结构。CSS Rule Tree：浏览器将CSS解析成树形的数据结构。Render Tree: DOM和CSSOM合并后生成Render Tree。layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。期间会有一些二月逆流：reflow（回流）和 repaint（重绘）。注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。有学习必有输出，《浏览器渲染原理及流程》是高手的学习笔记，然后我现在拜读了他的学习笔记后又写了这篇学习笔记。参考资料：浏览器渲染原理及流程
...继续阅读
(77)
发表于
2017-04-06 07:16:24
狗屎一样的React（第三节，创建app顶部标题栏）
发表于
2017-03-26 08:44:18
Koa2中使用hbs模板引擎渲染无法渲染layout的问题
views的目录结构如下└───views
index.hbs
layout.hbs使用了 koa-viewsapp.use(views(join(__dirname, '/views'), {
extension: 'hbs',
map: { hbs: 'handlebars' }
}));在路由中router.get('/', async (ctx) => {
await ctx.render('index');
});然而实际访问 / 时，只渲染了 index.hbs$ DEBUG=koa-views node index.js
koa-views render `index.hbs` with {"partials":{}} +0ms已经查阅了各种资料，依然找不到问题的原因。
...继续阅读
(2)
发表于
2017-03-24 12:46:59
使用 JSX 描述 UI 信息
发表于
2017-03-23 00:29:09
React 小书 Lesson1-2 - 前端组件化（一）：从一个简单的例子讲起
发表于
2017-03-21 10:46:09
GPU Performance for Game Artists
We rely on artists to produce assets that not only look good but are also efficient to render. For artists, a little knowledge of what goes on under the hood can make a big impact on a game’s framerate. If you’re an artist and want to understand why things
...继续阅读
(17)
发表于
2017-03-16 11:45:06
react生命周期分享，无论你是否看过！！！
一、基础先来介绍一个生命周期的定义：1）componentWillMount(){}// Mounting 安装阶段
// 在客户端和服务器上，在初始渲染发生之前立即调用一次 如果在这个方法中调用setState，
// render（）将看到更新的状态，并且只会执行一次，尽管状态改变。2)componentDidMount(){}// Mounting 安装阶段
// 调用一次，只在客户端（不在服务器上），在初始渲染发生后立即
// 子组件的componentDidMount（）方法在父组件的componentDidMount（）方法之前被调用
// setTimeout setInterval AJAX 在此之行，强烈建议3)componentWillReceiveProps(nextProps){}// Updating 更新阶段
// 在组件接收新props时调用。初始渲染不调用此方法。
// 老的props可以用this.props 新值就用nextProps查看
// 在此函数中调用this.setState（）不会触发附加的渲染。4)shouldComponentUpdate(nextProps, nextState){}// Updating 更新阶段
// 当正在接收新的道具或状态时，在渲染之前调用。
// 此方法必须返回false or true
...继续阅读
(31)
发表于
2017-03-12 21:52:09
React之ref详细用法
发表于
2017-03-04 20:20:27
【译】State and Lifecycle (State和生命周期)
下面是react官方文档的个人翻译，如有翻译错误，请多多指出原文地址：https://facebook.github.io/re...Consider the ticking clock example from one of the previous sections.思考一下，我们之前提到过的时钟例子。So far we have only learned one way to update the UI.到目前为止，我们只学到一种更新UI的方式。We call ReactDOM.render() to change the rendered output:我们调用ReactDOM.render()的方法来改变渲染的输出：function tick() {
const element = (Hello, world!It is {new Date().toLocaleTimeString()}.);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);打开试试In this section, we will learn how to make the Clock component truly reusable and enca
...继续阅读
(12)
发表于
2017-03-03 08:46:41
React初探
React 特点声明式设计 −React采用声明范式，可以轻松描述应用。高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。灵活 −React可以与已知的库或框架很好地配合。JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。官网地址more简单DemoDOCTYPE htmlHello React!ReactDOM.render(
Hello, world!
, document.getElementById('example') );引入依赖实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 browser.min.js：react.min.js - React 的核心库react-dom.min.js - 提供与 DOM 相关的功能browser.min.js - 用于将 JSX 语法转为 JavaScript 语法React代码React JSX语法React 使用 JSX ...继续阅读 (33)发表于
2017-02-26 06:24:43
Vue2 源码分析
源码版本：v2.1.10分析目标通过阅读源码，对 Vue2 的基础运行机制有所了解，主要是：Vue2 中数据绑定的实现方式Vue2 中对 Virtual DOM 机制的使用方式源码初见项目构建配置文件为build/config.js，定位 vue.js 对应的入口文件为src/entries/web-runtime-with-compiler.js，基于rollup进行模块打包。代码中使用flow进行接口类型标记和检查，在打包过程中移除这些标记。为了阅读代码方便，在 VS Code 中安装了插件Flow Language Support，然后关闭工作区 JS 代码检查，这样界面就清爽很多了。Vue 应用启动一般是通过new Vue({...})，所以，先从该构造函数着手。注：本文只关注 Vue 在浏览器端的应用，不涉及服务器端代码。Vue 构造函数文件：src/core/instance/index.js该文件只是构造函数，Vue 原型对象的声明分散在当前目录的多个文件中：init.js：._init()state.js：.$data.$set().$delete().$watch()render.js：._render()…events.js：.$on().$once().$off().$emit()lifecycle.js：._mount()._update().$force
...继续阅读
(27)
发表于
2017-02-26 01:48:26
React+webpack从0到1开发一个todoMvc（二）
发表于
2017-02-24 15:49:51
50 行代码内实现一个 React.js
作者：胡子大哈原文链接：http://huzidaha.com/posts/det...转载请注明出处，保留原文链接和作者信息。目录1 前言2 一切从点赞说起3 实现可复用性3.1 结构复用3.2 生成 DOM 元素并且添加事件4 为什么不暴力一点？4.1 状态改变 -> 构建新的 DOM 元素4.2 重新插入新的 DOM 元素5 抽象出 Component 类6 总结1 前言本文会教你如何在 50 行代码内，不依赖任何第三方的库，用纯 JavaScript 实现一个 React.js 。本文的目的是：揭开对初学者看起来很很难理解的 React.js 的组件化形式的外衣，让你有更多的精力和注意力去学习 React.js 精髓的地方。如果你刚开始学习 React.js 并且感觉很迷茫，那么看完这篇文章以后就能够解除一些疑惑。另外注意，本文所实现的代码只用于说明教学展示，并不适用于生产环境。代码托管这个仓库。心急如焚的同学可以先去看代码，但本文会从最基础的内容开始解释。2 一切从点赞说起接下来所有的代码都会从一个基本的点赞功能开始演化，你会逐渐看到，文章代码慢慢地越来越像 React.js 的组件代码。而在这个过程里面，大家需要只需要跟着文章的思路，就可以在代码的演化当中体会到组件化形式。假设现在我们需要实现一个点赞、取消点赞的功能。[image:B4B41FF2-519A-4A7C-
...继续阅读
(10)
发表于
2017-02-19 14:45:41
React思维方式·译
发表于
2017-02-18 06:28:27
分享个isomorphic+react 煎蛋 害羞组
react + server-side-render 一个纯妹子图SPA，工作之余，提神醒脑。点击即可切换下一张。适配移动端。
线上http://chuuup.applinzi.com/ooxx比较简单，小小demo，顺便求个star~
githubhttps://github.com/believeitcould/IsomorphicApp
...继续阅读
(5)
发表于
2017-02-16 19:56:19
【译】React应用性能优化
