初识ReactJS的组件化开发(三):利用ajax渲染电影列表

最新推荐文章于 2024-05-20 13:46:36 发布

学习笔记666

最新推荐文章于 2024-05-20 13:46:36 发布

阅读量4.3k

点赞数

分类专栏： HTML5 文章标签： ajax

本文链接：https://blog.csdn.net/github_26672553/article/details/52074006

版权

HTML5 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

我们使用zepto库来做ajax请求
安装zepto：
1.cd到项目根目录
2.执行 npm install zepto
然后发现我们的项目中就多了
这里写图片描述

**reactJS的组件生命周期
3个状态：
1.mounting 已经插入真实DOM
2.updating 正在被渲染
3.unmounting 已移除真实Dom
每个一状态都有对应的函数，只要在前面加上componentWill代表”即将进入某状态前调用”
加上componentDid代表”进入了某个状态后调用”
既然有状态，肯定有保存状态的方法
this.state
初始化
getInitialState:function(){
return {
key1:初始值1,
key2:初始值2
};
}**

清楚了reactJS组件的声明周期，我们来写这个电影组件把：

// 电影列表组件
var MoiveList = React.createClass({
    getInitialState: function () {
        return {
            movie:[] //保存电影json对象数组
        };
    },

    componentDidMount: function () {
        $.get("http://localhost/myphp/movies.php",null,function (ret) {
            this.setState({movie:ret});
        }.bind(this))
    },

    render: function(){
        var lis = this.state.movie.map(function (m) {
            return <li><p className="title">{m.movieName}</p><p className="intro">{m.movieIntro}</p></li>
        })
        return <ul>{lis}</ul>
    }
});

getInitialState方法里定义一个保存电影json数据的数组。
componentDidMount里做ajax请求远程服务器的数据，然后加入到数组.

最后，我们看一下最后的js代码：


// 创建组件
var NavBar = React.createClass({
    liClick: function () {
        alert('组件');
    },
    render: function(){
        return <ul>
                <li><a href="">最新电影</a></li>
                <li><a href="" onClick={function(){alert('组件')}}>最新评论</a></li>
                <li><SearchText cssClass="search_text2" /></li>
            </ul>
    }
});

// 搜索框组件
var SearchText = React.createClass({
    render: function(){
        return <input type="text" placeholder="请输入关键字" className={this.props.cssClass}/>
    }
});

// 电影列表组件
var MoiveList = React.createClass({
    getInitialState: function () {
        return {
            movie:[] //保存电影json对象数组
        };
    },

    componentDidMount: function () {
        $.get("http://localhost/myphp/movies.php",null,function (ret) {
            this.setState({movie:ret});
        }.bind(this))
    },

    render: function(){
        var lis = this.state.movie.map(function (m) {
            return <li><p className="title">{m.movieName}</p><p className="intro">{m.movieIntro}</p></li>
        })
        return <ul>{lis}</ul>
    }
});

ReactDOM.render(
    // 使用组件
    <NavBar />,
    document.getElementById("navbar")
);

ReactDOM.render(
    <MoiveList />,
    document.getElementById("movielist")
);

html代码：

<!DOCTYPE html>
<html>
<head>
    <title>初始</title>
    <meta charset="utf-8">
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <script src="node_modules/zepto/dist/zepto.min.js"></script>

    <style type="text/css">
        *{padding: 0;margin: 0}
        #navbar{position: fixed;top: 0;left: 0;width: 100%;height: 60px;background-color: #222;}
        #navbar li{float: left;line-height: 60px;margin-left: 10px;display: inline-block;}
        #navbar li a{color: #fff;text-decoration: none;}
        /*searchtext的样式*/
        .search_text{height: 25px;border-radius: 5px;}
        .search_text2{height: 25px;border-radius: 5px;background-color: beige}

        #container{margin: 70px auto;}
        #container p{text-align: center;}

        #movielist .title{font-weight: bold;font-size: 18px;}
        #movielist .intro{text-indent: 2em;color: gray;border-bottom: 1px dashed #dddddd;text-align: left;padding: 10px;}
    </style>
</head>
<body>
    <div id="navbar"></div>
    <div id="container">
        <p>电影列表</p>
        <div id="movielist"></div>
    </div>
    <div id="footer"></div>

    <script type="text/babel" src="src/nav.js"></script>
</body>
</html>

php代码：

<?php
header("Access-Control-Allow-Origin:*");
header("Content-type: application/json");

$m1['movieName'] = "美国队长";
$m1['movieIntro'] = "美国队长（Captain America）是美国漫威漫画旗下超级英雄。由乔·西蒙和杰克·科比联合创造，初次登场于1941年3月出版的《美国队长》漫画（Captain America Comics）第1期，被视为美国精神的象征。";

$m2['movieName'] = "疯狂动物城";
$m2['movieIntro'] = "《疯狂动物城》由迪士尼影业出品的3D动画片，由里奇·摩尔、拜恩·霍华德及杰拉德·布什联合执导，金妮弗·古德温、杰森·贝特曼、夏奇拉、艾伦·图代克、伊德瑞斯·艾尔巴、J·K·西蒙斯等加盟配音。";

$data = [$m1,$m2];

die(json_encode($data,JSON_UNESCAPED_UNICODE));

效果：
这里写图片描述

学习笔记666

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
初识ReactJS的组件化开发(三):利用ajax渲染电影列表

我们使用zepto库来做ajax请求安装zepto： 1.cd到项目根目录 2.执行 npm install zepto 然后发现我们的项目中就多了因为ajax是异步的，所以我们要想成功把数据后期渲染，就必须了解reactJS组件的声明周期了。《reactJS基础学习篇》初识reactJS的组件化开发(一)：简单封装 var navBar = react.createClass(
复制链接

扫一扫