note
组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage。另外,组件类只能包含一个顶层标签,否则也会报错。
添加组件属性,有一个地方需要注意,就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
react developer tool 根据全局变量
REACT_DEVTOOLS_GLOBAL_HOOK
与浏览器 通信
性能
react 在传入 数组 作为参数时。数组是子 component
那么,需要花很长时间,比较 verture dom 的不同。
然后修改值。
给每一个component 添加key 能够,更快的找到元素
调试
在 js 里 加上
debugger;
即可在此添加断点,进行调试
在浏览器,直接打断点,刷新就没用了
debugger 在 .eslintrc ,rules添加
“no-debugger”: 1,
0: off
1: warn
2: error
在生产时,需要删除这句话
es6版本
没有getInitialState
let app = React.createClass({
getInitialState: function(){
// some thing
}
})
然后也看到用 React.Component,于是
class TodoApp extends React.Component{
getInitialState(){
// some thing
}
}
后者没有 getInitialState
要在 constructor 声明
constructor(props) {
super(props)
this.state = {
};
}
child has key
react报错Each child in an array or iterator should
可以通过key 获取 实际dom吗
_react2.default.findDOMNode
is not a function
-引入 ReactDOM
使用.findDOMNode
-或者
you don’t need findDOMNode to use refs at all:
this.refs.brand.value
is sufficient.
注意,这时ref绑定的子节点,也是component,那么返回的,不是dom,而是react componennt。
在子节点上绑定ref。才能获取子节点真实dom。
在之前的版本,用findDOWNode 是直接返回子节点的
component 不能直接包含属性
ES6中、class的主体只能包含方法,不能包含数据属性
在constructor 用this 声明
事件绑定,this指向
在使用React中 如果使用ES6的Class extends写法 如果onClick绑定一个方法 需要bind(this)。如下
onClick={
this.handleClick.bind(this)
}
而使用React.createClass方法 就不需要.
因为之前的React自动绑定了this。
一般写事件绑定,不都是需要,给响应事件,重新绑定this的么。
加css前缀
[‘-moz-‘,’-ms-‘,’-webkit-‘,’’]
在js里厂商前缀要向下面加
[‘MozTransform’,’msTransform’,’WebkitTransform’,’transform’]
直接把整个对象,赋值给style。得按照js 的格式
相关知识点
cssmodules
react flux
react animation api
react canvas,提升性能
react native
技术栈: Express.js + React.js + Webpack + Babel.js + ES6 + React-Router + Redux + Stylus
http://ant.design/ React开源 UI 组件库
学习地址
http://reactjs.cn/
http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html
http://react-china.org/t/react-js/398
http://www.ruanyifeng.com/blog/2015/03/react.html
https://facebook.github.io/react/docs/events.html#supported-events
http://www.imooc.com/learn/507
http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know