state、生命周期、使用ajax第三方库(axios)
import React from 'react';
import ReactDOM from 'react-dom';
// 定义一个组件
class Team extends React.Component{
render(){
return <div>
成员列表
{
this.props.users.map(
(item)=>{
return {item.name}_{item.age}
}
)
}
div>
}
}
// 定义一个数组
// 作为参数传递进组件
let users = [
{name:"lily",age:21},
{name:"jack",age:23}
];
// 最后渲染
ReactDOM.render(
首选看上面代码，我们定义了一个React组件，然后又定义了一个数组，在渲染组件的时候作为参数传递。
最后效果如下图：
<Team users={users} />, // 使用组件为什么我们在Team这个class外部 随便写个属性，calss内部就可以通过this.props获取？
关于props
props属性是只读的。(这一点我们可以通过Obejct.defineProperty来实现同样的功能)
1、无法通过赋值运算符=去修改props
2、如果props是一个对象，我们可以对对象的属性进行修改
3、但是只是修改 却没有触发组件的重新渲染
class Team extends React.Component{
render(){
return <div>
成员列表
{
this.props.users.map(
(item)=>{
return {item.name}_{item.age}
}
)
}
div>
}
}此段代码演示了，可以对对象的属性改变，但页面没有重新渲染。
如果不是传递的对象：
<Team users={users} pop="simple" />,比如pop属性。
在Team组件内部是不能通过this.props.pop="xxxx"来修改的。
如果做到修改属性值后，重新渲染
this.setState()方法就登场了。(还有个forceUpdate()方法).
看见没有，在我们刚才的代码下来，增加这句就可以重新渲染页面了。
还有这个语句也是可以的：
其实上面这2种方式都不符合react.js的规范。
class Team extends React.Component{
render(){
return <div>
成员列表
{
this.props.users.map(
(item)=>{
return {item.name}_{item.age}
}
)
}
div>
}
}react.js内部有个state，在this.setState()中重新赋值，就会再次调用render()方法以达到重新渲染页面的目的。
组件的生命周期
官方文档地址：
https://facebook.github.io/react/docs/react-component.html
我们用过案列简单演示
另外我们需要一个插件axios，相当于ajax。
https://github.com/mzabriskie/axios
安装这个插件：
npm install axios我们案列要完成的功能是：在渲染之前(componentWillMount())，请求服务器。
import React from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";
// 定义一个组件
class Team extends React.Component{
// 初始化
constructor(props) {
super(props);
this.state = {
users: []
};
}
componentWillMount(){
axios.get("http://localhost/test.php").then((res)=>{
console.log(res.data);
this.setState({
users: res.data
})
})
}
render(){
return <div>
<h2>成员列表h2>
{
this.state.users.map(
(item)=>{
return {item.name}_{item.age}
}
)
}
div>
}
}
// 最后渲染
ReactDOM.render(
/>, / / 使用组件
document.getElementById('root')
);这个按钮，我们不仅使用了axios从后端服务器获取数据，还充分使用了state。
使用this.state.users来替换this.props.users。
注意后端php程序返回是一个json数组：
[{"name":"zhangSan","age":21},{"name":"lisi","age":23}]