react随手note

学习进行中,随手的note

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