项目中有个需求，需要实时改变数据。实时改变数据有两种方式。
第一种方式是通过Ajax轮询，浏览器需要不断的向服务器发出请求，在本项目中需要改变数据的地方有多处，连续的Ajax请求对服务器的压力很大，所以不适合这种方式。
第二种方式是通过HTML5 定义的 WebSocket 协议，使浏览器和服务器保持持久性的连接，服务端向客户端主动推送信息。
本项目中采用了第二种方式，这里对react中使用WebSocket实时改变数据做了一点笔记。
WebSocket简介
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，本质上是一个基于 TCP 的协议。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket创建、使用API
创建 WebSocket 对象
1
| var ws = new WebSocket(url, [protocol] );
|
在获取 WebSocket 连接后，可以通过 send 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| ws.onopen = function() {
ws.send("发送数据");
alert("数据发送中...");
};
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("数据已接收...");
};
ws.onclose = function() {
alert("连接已关闭...");
};
|
react中使用WebSocket
首先抽取一个通用方法开启WebSocket
1
2
3
4
5
6
7
8
9
10
11
| export const startWs = () => {
const host = 'aaa.com';
let protocol = 'wss';
const {host: host2} = window.location;
if (window.location.protocol === 'http:' && host2 !== 'localhost:3000') {
protocol = 'ws';
}
return new WebSocket(`${protocol}://${host}/api/wsname`);
};
|
在page中使用WebSocket，并将数据传递给组件
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
32
33
34
35
36
| export default class Index extends React.Component {
constructor(props) {
super(props);
this.ws = startWs();
}
componentDidMount() {
this.watchWs();
}
componentWillUnmount = () => {
this.ws.close();
}
watchWs = () => {
this.ws.onmessage = (evt) => {
let data = {};
try {
data = JSON.parse(evt.data);
} catch (e) { console.log(e); }
this.setState({
currentData: data,
});
};
}
render() {
const { item, currentData } = this.state;
return (
<div className="pages-index" >
<Item data={item}
currentData={currentData}
/>
</div>)
}
}
|
组件接受数据后实时改变自身。
这里使用getDerivedStateFromProps这个生命周期，意思就是从props中获取state，即将传入的props映射到state上面，意味着即使你的props没有任何变化，而是父state发生了变化，导致子组件发生了re-render，这个生命周期函数依然会被调用。
getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| export default class Item extends React.Component {
constructor(props) {
super(props);
}
static getDerivedStateFromProps(nextProps, prevState) {
const {currentData = {}} = nextProps;
if (currentData !== prevState.currentData) {
return newObj {
attr: attr1
}
}
return null;
}
render() {
const {newObj} = this.state;
return (<div className="components-item">
<div>{newObj.attr}</div>
</div>)
}
}
|
这里Item组件通过接受父组件的props来改变自身状态。