state、生命周期、使用ajax第三方库(axios)

import React from 'react';import ReactDOM from 'react-dom';// 定义一个组件class Team extends React.Component{    render(){        return <div>                <h2>成员列表</h2>            {                this.props.users.map(                    (item)=>{                        return <p>{item.name}_{item.age}</p>                    }                )            }        </div>    }}// 定义一个数组// 作为参数传递进组件let users = [    {name:"lily",age:21},    {name:"jack",age:23}];// 最后渲染ReactDOM.render(    <Team users={users} />, // 使用组件    document.getElementById('root'));

首选看上面代码，我们定义了一个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>                <h2>成员列表</h2>            {                this.props.users.map(                    (item)=>{                        return <p>{item.name}_{item.age}</p>                    }                )            }            <p>                <button onClick={()=>{                    this.props.users[0].name = "王五";                    console.log(this.props.users[0].name); // 肯定值已经改变，但页面没有变化                }}>改变值</button>            </p>        </div>    }}

此段代码演示了，可以对对象的属性改变，但页面没有重新渲染。

如果不是传递的对象：

<Team users={users}  pop="simple" />,

比如pop属性。
在Team组件内部是不能通过this.props.pop="xxxx"来修改的。

如果做到修改属性值后，重新渲染

this.setState()方法就登场了。(还有个forceUpdate()方法).

                <button onClick={()=>{                    this.props.users[0].name = "王五";                    console.log(this.props.users[0].name); // 肯定值已经改变，但页面没有变化                    this.setState();                }}>改变值</button>

看见没有，在我们刚才的代码下来，增加这句就可以重新渲染页面了。

还有这个语句也是可以的：

                <button onClick={()=>{                    this.props.users[0].name = "王五";                    console.log(this.props.users[0].name); // 肯定值已经改变，但页面没有变化                    this.forceUpdate();                }}>改变值</button>

其实上面这2种方式都不符合react.js的规范。

class Team extends React.Component{    render(){        return <div>                <h2>成员列表</h2>            {                this.props.users.map(                    (item)=>{                        return <p>{item.name}_{item.age}</p>                    }                )            }            <p>                <button onClick={()=>{                    let getState = this.props.users;                    getState[0].name = "王武"                    this.setState({                        users: getState                    })                }}>改变值</button>            </p>        </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 <p>{item.name}_{item.age}</p>                    }                )            }        </div>    }}// 最后渲染ReactDOM.render(    <Team />, // 使用组件    document.getElementById('root'));

这个按钮，我们不仅使用了axios从后端服务器获取数据，还充分使用了state。
使用this.state.users来替换this.props.users。

注意后端php程序返回是一个json数组：

[{"name":"zhangSan","age":21},{"name":"lisi","age":23}]