发现一个好用的网站caniuse.com
caniuse.com(我能用么),在这个网站上你可以查看你所引入的模块被哪些浏览器支持,非常清晰。示例图如下:
react组件
component是react的一大特性,以标签的形式模块化的组织视图及其功能。component类的方法可以有以下几种:事件处理方法、组件生命周期方法、render方法以及初始化方法。其中render方法必须有,return的结果就是页面要渲染呈现的内容。事件处理方法的使用是将其绑定在render结果中的某个(些)标签上,在触发特定事件后进行调用。
参考资料
Thinking in React
react 组件life-cycle
- 初始化阶段
getDefaultProps
在组件创建的时候调用,即使用React.createClass()时,定义默认的props,保证父组件没有传入参数时props仍有值可用。
getInitialState
初始化this.state,只在组件Mount前调用一次。state属性用来标记组件内部状态的变化,是控制组件视图变化的重要手段。除了使用getInitialState方法外,ES6也可使用构造器进行初始化。
constructor(props) {
super(props);
this.state = { count: props.initialCount };
}
- 组件装载阶段
componentWillMount
只在render之前调用一次,可以调用setState改变状态。
componetDidMounnt
只在render之后调用一次,可以调用findDOMNode(this)查找组件结点。
render之后调用 - 组件更新阶段
(以下方法不会在首次render的时候调用)
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
- 组件卸载阶段
componentWillUnmount
react的props和state
super(props)是什么意思?
state是class才具备的特性,所以要使用state的组件必须用class myClass extends React.Component()
创建,而不是函数对象的形式创建。state的初始化是在constructor类构造器中为this.state赋值。
react中调用setState方法设置state的值,会触发组件重新render。
react事件
react事件分为两种,一种是js原生事件,在生命周期函数componentDidMount
中使用addEventListener
进行绑定,一种是合成事件,使用jsx在组件中进行绑定操作,<p onClick={this.handleClick.bind(this, 'extra param')}>
(尽量显式的将事件处理函数绑定到组件实例)。合成事件符合w3c标准,其好处是会以事件委托(event delegation)的形式绑定到最上层组件,并在组件卸载时自动销毁。而原生事件需要在componentWillUnmount
阶段使用removeEventListener
手动解除绑定。
react的DOM操作
- 获取组件对应的DOM元素
组件加载后,可以使用ReactDOM.findDOMNode()
来获取,需要注意的是findDOMNode
不能获取到无状态的组件。 - refs
为元素设置ref属性,可在组件内部对元素进行访问,而且是唯一可靠的方式,如this.refs.name
,需要注意的是ref不能设置在无状态组件上(无状态组件指的是没有生命周期函数、没有设置state变量的组件)。