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

最新推荐文章于 2022-09-22 14:48:27 发布

原创最新推荐文章于 2022-09-22 14:48:27 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

React.js篇专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了React组件的创建及Props的使用方法，探讨了Props的只读特性，并通过实例展示了如何利用state实现组件的更新与重绘。此外，文章还讲解了组件生命周期中的componentWillMount方法的应用场景。

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}]