React-学习笔记汇总

推荐文章

http://www.ruanyifeng.com/blog/2015/03/react.html

https://reactjs.org/docs/getting-started.html

https://reactjs.org/tutorial/tutorial.html

 

 

www.reactjs.cn，http://www.webdoes.com/blog/archives/725，都专门讲解了react-native

 

市场上所有 JavaScript MVC 框架

http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

 

也许，DOM 不是答案

http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html

 

社区交流的渠道可以在 http://nav.react-china.org/ 查看

React中文社区http://www.laolifactory.com/index.php/2015/10/19/reacts-diff-algorithm-chinese/

 

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native，结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。

下面是对 React Native 官方文档的完整中文翻译教程：http://wiki.jikexueyuan.com/project/react-native/

 

 

注意看代码下面的bind(this)，这是通过function的bind方法指定了作用域，相关链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

 

render 的时候重新生成了 Virtual DOM，但重新渲染UI时，React 只会对 Virtual DOM 中发生改变了的部分进行重新渲染。render 后 Virtual DOM 中 input 的 value 属性值其实发生了变化，但和真实 DOM 中 input 的 value 属性值，故没有渲染到UI中。
PS. 你可以通过在 input 上加上 ref="myTextInput"，并在 handleChange 里加入 console.log(this.refs["myTextInput"].props); 来打印 Virtual DOM 的属性值来发现其中奥妙。

 

this用在react内部的函数里面，比如render，由react调用肯定没问题，
this用在自定义函数里面，都要有显示绑定this，比如 onChange={this.handleChange}

 

React是可以不用JSX的，可以直接写js
jsx：Hello {this.props.name} 
js：React.createElement("div", null, "Hello ", this.props.name);
主要是jsx的类html语法比起原生js容易构建用户界面，嵌套层次一多自然会去用jsx了，只是做一层预编译

 

现在貌似改成了0.14版本后 "text/jsx"改成"text/babel" ,官方不再发布 JSXTransformer.js 了 改成babel解析...
http://www.tuicool.com/articles/NFvYfeB

 

关于browser 官方放了cdn 速度很不错
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

 

虚拟DOM Diff算法解析

https://www.infoq.cn/article/react-dom-diff/?utm_campaign=rightbar_v2&utm_source=infoq&utm_medium=articles_link&utm_content=link_text

 

 

由于React注重UI效率，使用Virtual DOM Diff来提高效率，最小化Html DOM渲染开销，所以遇到DOM nodelist时期望每个node有个key来做引用标识, 这仅仅是一个Warning，一般不会对你的App功能造成影响，但是应该注意此类问题，大规模View中可能会引发性能问题。

解决此问题的方法就是给你的Virtual DOM Nodelist中每个Node加唯一的key标识。

{List.map(function(item){
return (<li key={"Item-"+item.id}>{item.name}</li>);
})}

 

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
props,在这里很常见的用法是传参,显然形参你改了也灭用
而state这个属性就要好好把玩了,也说了,交互中很常见的状态

 

这里推荐一个关于react的比较好的网页： http://survivejs.com。
里边主要分两大篇， 一篇是说如何成为react高手， 另一篇是如何使用webpack来进行工程化管理的， 都比较经典。

 

ES6 语法：http://es6.ruanyifeng.com/

JS教程：https://wangdoc.com/javascript/