前端学习笔记 React (3) State

前面说 Component 组件是可以独立操作或循环显示的单位, Render 方法配合 Component 标签(最上层配合 ReactDOM)可以显示组件, 通过 props 将数据从上层传递到下层是别人的数据.

State 则是当前类的数据, 是私有的, 可以使用 this.state 进行访问, 必须通过 this.setState() 设置状态才会刷新界面.

import $ from 'jquery';

constructor(props) {
	super(props);
	this.state = {data: []};

	this.init();
}

init() {
	$.ajax({
      url: this.props.url,
      type: 'GET',
      dataType: 'json'
    })
    .done(comments => {
      console.log("success");
      this.setState({data: comments});
    })
    .fail(err => {
      console.log("error", err.stack);
    })
    .always(() => {
      console.log("complete");
    });
}

render() {
	return (
		<div className="ui comment">
			<CommentList data={this.state.data} />
		</div>
	);
}

注意: 设置 state 的时候, this.setState(obj) 进行的对象的部分覆盖, 有 key 的设置进去, 没有的使用原来的.