如何理解react中虚拟DOM?

http://www.zhihu.com/question/29504639

中间会有一次用diff生成的补丁操作。这样理解起来很容易的,和git的patch一样。最终render的为原来dom的差异部分DOM,详细见:http://www.infoq.com/cn/articles/react-dom-diff

可见Infoq视频 http://www.infoq.com/cn/presentations/pracitise-of-reactjs

http://study.163.com/course/courseLearn.htm?courseId=1262004#/learn/video?lessonId=1507023&courseId=1262004

React相关学习资料

React 入门实例教程: http://www.ruanyifeng.com/blog/2015/03/react.html

React 入门实例教程实例:https://github.com/ruanyf/react-demos

React+Babal+WebPack: https://github.com/ruanyf/react-babel-webpack-boilerplate

React Router 使用教程: http://www.ruanyifeng.com/blog/2016/05/react_router.html  https://github.com/reactjs/react-router

React学习资料:http://www.infoq.com/cn/react1/

React中CSS样式模块:https://css-modules.github.io/webpack-demo/

深入浅出React(一):React的设计哲学 - 简单之美 http://www.infoq.com/cn/articles/react-art-of-simplity

深入浅出React(二):React开发神器Webpack http://www.infoq.com/cn/articles/react-and-webpack

深入浅出React(三):理解JSX和组件 http://www.infoq.com/cn/articles/react-jsx-and-component
深入浅出React(四):虚拟DOM Diff算法解析 http://www.infoq.com/cn/articles/react-dom-diff

React Native通信机制详解 http://blog.cnbang.net/tech/2698/

Flux 傻瓜教程 http://zhuanlan.zhihu.com/FrontendMagazine/19900243
Flux应用架构 http://reactjs.cn/react/docs/flux-overview.html

W3CTech美团react专场- React和 Flux 的组件定制化实践 http://www.slideshare.net/meituan/w3ctechreact-react-flux

Flux 或 Relay,或许 Redux 的区别:
http://segmentfault.com/a/1190000003099895
http://segmentfault.com/a/1190000003822606

Redux 介绍 http://segmentfault.com/a/1190000003503338

Redux官方文档 http://rackt.org/redux/index.html (中文版:http://camsong.github.io/redux-in-chinese/ )

使用Redux管理你的React应用 http://www.cnblogs.com/Leo_wl/p/4780750.html

Redux核心概念 http://www.jianshu.com/p/3334467e4b32

infoQ视频:http://www.infoq.com/cn/presentations/pracitise-of-reactjs

react相关资料:http://www.infoq.com/cn/search.action?queryString=react&page=1&searchOrder=&sst=f7UtueDzasVFnM8c

React开发中的常见问题

当你在写react的时候报了类似于这样子的错:Each child in an array or iterator should have a unique “key” prop.Check the render method of `xxxx`. See https://fb.me/react-warning-keys for more information.

原因是这样子的:React can’t know that your array is static, so you get the warning. The most practical thing to do here is to write something like.

解决办法只要在循环的每个子项添加一个key就行了,代码如下:

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
    <div>
        {
          names.map(function (name, key) {
            return <div key={key}>Hello, {name}!</div>
          })
        }
    </div>,
    document.getElementById('example')
);

React 编程风格指南

推荐先看下ECMAScript 6 的编程风格:http://es6.ruanyifeng.com/#docs/style,再看下面的React编程风格。

本文讨论的是 React.js 编程中的一些编程风格,团队开发中遵循统一的风格有利于提高代码的阅读体验。
本文译自React style guide。下面将从三个方面来讲。

语法

方法顺序遵循生命周期放在前面, render() 方法放在最后

react 组件内部,方法的顺序如下:

  1. 生命周期方法,按照时间先后顺序依次为(https://hulufei.gitbooks.io/react-tutorial/content/component-lifecycle.html):
    getDefaultProps,
    getInitialState,
    componentWillMount,
    componentDidMount,
    componentWillReceiveProps,
    shouldComponentUpdate,
    componentWillUpdate,
    componentDidUpdate,
    componentWillUnmount
  2. 其他的方法
  3. render 方法

事件处理函数的命名

采用 "handle" + "EventName" 的方式来命名 Continue reading