chili 默默学编程

React 技术栈(二):基本用法2


原文在此:

https://github.com/ruanyf/jstraining/blob/master/docs/react.md


8、组件的生命周期

React 为组件的不同生命阶段,提供了对应的调用方法:

    - componentWillMount():组件加载前调用

    - componentDidMount():组件加载后调用

    - componentWilUpdate():组件更新前调用

    - componentDidUpdate():组件更新后调用

    - componentWillUnmount():组件卸载前调用

    - componentWillReceiveProps():组件接受新的参数时调用


(本例通过 ajax 获得出来的的 JSON 数据是 Github 上面最受欢迎的 JavaScript 项目)

(本例通过 jQuery 使用 ajax,需要引入 jQuery)

引用:

    <script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="jquery.js"></script>
<script src="babel.min.js"></script>

例子:

<script type="text/babel">
class MyList extends React.Component {
constructor(...args) {
super(...args);
this.state = {
loading: true,
error: null,
data: null
};
}

componentDidMount() {
const url = 'https://api.github.com/search/ repositories?q=javascript&sort=stars';
$.getJSON(url)
.done(
(value) => this.setState({
loading: false,
data: value
})
).fail(
(jqXHR, textStatus) => this.setState({
loading: false,
error: jqXHR.status
})
);
}

render() {
if (this.state.loading) {
return <span>Loading...</span>;
} else if (this.state.error !== null) {
return <span>Error: {this.state.error}</span>;
} else {
var projects = this.state.data.items;
var results = [];
projects.forEach(p => {
var item = <li>{p.name}</li>;
results.push(item);
});

return (
<div>
<ul>{results}</ul>
</div>
);
}
}


ReactDOM.render(
<MyList/>,
document.getElementById('example')
); </script>

解释:

    - MyList 这个组件有三个状态:loading,error,data

    - loading 状态,初始值是 true,此时,组件渲染出来的就是 <span>Loading...</span>

    - MyList 组件加载之后,执行 componentDidMount 函数

    - componentDidMount 函数,是一个 ajax 请求:

            - loading 设置为 false

            - 请求成功时,将获得的数据赋值给 this.state.data 

            - 请求失败时,将 jqXHR.status 赋值给 this.state.error(HTTP状态码,比如404,500等错误代码)

    - 赋值后,组件重新渲染并显示

    - error 状态时,渲染出来的界面是 <span>Error: {this.state.error}</span>

    - 成功时(data 有数据时),用 forEach 遍历 data.items 中的每一个元素,生成 <li>{p.name}</li> 的节点,并插入返回的数据中。

    - 最后的结果如下:

    



reply ( 0 )