React学习笔记2

React学习笔记(一) 主要学习顶层API的东西,这里主要学习组件的生命周期东西,在这里做些笔记,免得自己健忘。
ReactDOM 提供了卸载组件的API,ReactDOM.unmountComponentAtNode 进行组件的移除或者卸载。

StackOverflow 问答: http://dwz.cn/3tx3gJ

1
2
3
4
5
6
7
8
9
10
11
var SampleComponent = React.createClass({
render: function() {
return <div>Mounted component.</div>;
}
});
ReactDOM.render(<SampleComponent />, document.getElementById('container'));
setTimeout(function() {
ReactDOM.unmountComponentAtNode(document.getElementById('container'));
}, 3000);

有一点需要注意的是:React组件被卸载的时候,会触发componentWillUnmount,具体可以可以看下实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var p = 0, timer;
var HelloMessage = React.createClass({
render: function() {
return <h1>一喵呜 {this.props.name}</h1>;
},
componentWillMount: function () {
console.log('componentWillMount');
},
getInitialState: function () {
timer = setInterval(function () {
p++;
console.log(p);
if (p === 3) {
ReactDOM.unmountComponentAtNode(document.getElementById('example4') );
}
},1000);
console.log('getInitialState');
},
componentDidMount: function () {
console.log('componentDidMount');
},
componentWillUnmount: function() {
clearInterval(timer);
console.log('卸载执行,清除计数器成功');
}
});
ReactDOM.render(
<HelloMessage name="BinJS"/>,
document.getElementById('example4')
);

查找组件

react可以允许我们通过 ref 来定位一个组件。所以可以这样:
先给一个组件设置一个 ref=‘xxx’ 的属性,注意这个ref必须是全局唯一的。

然后就可以通过 this.refs.city 来访问这个组件。但是获取到的组件是一个虚拟的DOM,因此才有了用ReactDOM.fineDOMNode 来获取一个真实的DOM节点,需要注意的是获取真实DOM需要在render之后才能获取成功,如果之前或者是没有这个DOM就返回 null

移动端触摸事件

v0.15版本之前开启移动端触摸事件需要这样:
进行移动开发时,渲染之前需要先调用React.initializeTouchEvents(true),然后使用onTouchCancel onTouchEnd onTouchMove onTouchStart来进行触摸事件的开发

v0.15 最新版本移除了这样的调用,直接用移动端事件就能用了:

1
onTouchCancel onTouchEnd onTouchMove onTouchStart

非DOM 属性 key 表单组件

1
2
3
4
5
6
7
8
9
// 文本框默认 'hi' 可以输入
ReactDOM.render(<input defaultValue="hi" />, mountNode);
// 文本框为空 可以输入
ReactDOM.render(<input value={undefined} />, mountNode);
ReactDOM.render(<input />, mountNode);
// 文本框默认 'hi' 只读状态 不能输入
ReactDOM.render(<input value='hi'/>, mountNode);
  • 设置了 value 的 <input>是一个受限组件。 对于受限的 <input>,渲染出来的 HTML 元素始终保持 value 属性的值。
  • 通过设置value为 nullundefined或 通过设置一个ref属性,然后this.refs 获取到虚拟DOM进行修改value 或者是event.target.value
  • 同样地, 类型为 radio、checkbox 的<input>支持 defaultChecked 属性, <select>支持defaultValue 属性。

受限组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var InputChangeValue = React.createClass({
getInitialState: function () {
return {value: 'binjs'};
},
handleChange: function (event) {
console.log(event.target.value);
this.setState({value: event.target.value});
//this.setState({value: event.target.value.substr(0, 140)}); // 限制140个字
},
render: function () {
var value = this.state.value;
return(
<div>
<input value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
)
}
})
ReactDOM.render(
<InputChangeValue />,
document.getElementById('example5')
)

不受限组件

没有设置 value的 (0.15版本之前 也可以设置null 就是不受限组件) <input>组件是一个不受限组件。对于不受限的 <input>组件,渲染出来的元素直接反应用户输入。

select 表单默认选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 单选 默认选中B 可编辑
<select defaultValue="B">
<option value="A">binjs</option>
<option value="B">huangyb</option>
</select>
// 单选 默认选中B 不可编辑
<select value="B">
<option value="A">binjs</option>
<option value="B">huangyb</option>
</select>
// 设置多选 默认选中B C 可编辑
<select multiple={true} defaultValue={['B', 'C']}>
<option value="A">binjs</option>
<option value="B">huangyb</option>
<option value="C">huang</option>
</select>

通过 AJAX 加载初始数据

componentDidMount 时加载数据。当加载成功,将数据存储在 state 中,触发 render 来更新你的 UI。当执行异步请求的响应时,在更新 state 前, 一定要先通过 this.isMounted()来检测组件的状态是否还是 mounted。React initial-ajax doc

0%