zoukankan      html  css  js  c++  java
  • React入门 (2)—实现微博展示列表

    前言

      如果从来不了解React先看前篇React入门 (1)—使用指南(包括ES5和ES6对比)
      本文为了能将前篇学到的react知识学以致用,做了一个类似微博展示列表的demo。使用的是ES6+React+JSX+Webpack+Babel+NPM

    设计思路

      图为截取的微博展示列表,我这么来划分组件:
    weibo_

      花括号括起来的是我要写的几个组件:

    • ContentImg组件:带图片的微博里的图片部分
    • CommentForm组件:点击评论后,弹出来的评论下拉框
    • OneWB组件:一条微博,这条微博可能是纯文字的,带一张图片的,带多张图片的,甚至是转发的。
    • ListWB组件:OneWB的集合,是一个页面要展示的所有微博的集合。

      最外层节点放在最上面,每个控件的数量通过后台给的数据控制,组件之间的关系用树状图表示:
    _

      本文章只实现纯文字,带图片的微博。带视屏,转发的可以用类似的方法实现,就不赘述了。后端数据的结构设计为:

    var dataList=[	
       {
    		headUrl:'http://img1.gtimg.com/tech/pics/hv1/238/85/1736/112905313.jpg',
    		nickName:'Robin',
    		content:'拿快递拿快递3号小邮局爆仓啦',
    		NoCollect:132,
    		NoForward:202,
    		NoComment:142,
    		NoPointGreat:423,
    		contentImgUrls:[
    		   "http://img1.gtimg.com/tech/pics/hv1/238/85/1736/112905313.jpg",
    		   "http://img1.gtimg.com/tech/pics/hv1/238/85/1736/112905313.jpg"
    	    ]
    	},
    	{
    		//内容同上
    	}
    	];
    
    • 必填
        headUrl:别人的头像链接,nickName:别人的昵称,content:微博文字内容,NoCollect:收藏数,NoForward:转发数,NoComment:评论数,NoPointGreat:点赞数。
    • 非必填
        contentImgUrls:微博图片内容,可以为空或不存在。

      图中组件的数量是根据后端给的数据来决定的,dataList的元素个数代表OneWB的个数,contentImgUrls的元素个数决定了微博带不带图片,以及展示几个。

    搭建环境

      使用webpack+npm。
      我的工程目录结构如图:
      screenshot
      webpack以commonjs的形式来书写脚本,是现在很火的模块加载器+打包工具。使用方法:

    1.创建package.json文件

      npm init
      参数可以不填,回车代替。
      执行完会生成package.json文件

    2.在终端安装你需要的插件

      npm install 插件名 --save-dev.
      ('--save-dev' 一般在开发者开发项目的时候用,这个指令会把安装的包依赖写入package.json的devDependencies字段中。如果命令去掉'-dev',则会记录到dependencies字段中)。
      需要安装这么些个:
      npm install -save-dev webpack
      npm install -save-dev react
      npm install -save-dev react-dom
      npm install --save-dev babel-core
      npm install --save-dev babel-loader
      npm install --save-dev babel-preset-es2015 ,babel6才需要装
      npm install -save-dev babel-preset-react,babel6才需要装
      如果用的别人的工程,已存在package.json文件且内容完整,那么直接npm install不需要手动安装了。

    3.创建webpack.config.js,并配置

      根据webpack.config.js文件来决定webpack要做哪些动作。

    //webpack.config.js 文件内容
    var path = require('path');
    
    module.exports = {
      entry: {
      	'index': './index.js' //key只是个名字,可以自由改
      },
      output: {
        path: './build',
        filename: 'entry.js',//也可以动态生成文件名 filename:'[name].js',将根据entry中的key生成名字
      },
      module: {
        loaders: [{
          test: /.jsx?$/,
          loader: 'babel',
          /* babel6 才需要配置这个,presets里面两个预编译插件,前一个用于编译es6,后一个用于编译react。按需配置。这个工程都需要。
          query:{
            presets: ['es2015','react']
          }*/
        }]
      }
    };
    
    

      这段代码主要告诉了webpack:

    • 哪个文件需要打包(entry字段),打包之后生成的新文件存到哪个路径(output中的path)、新文件叫什么名字(output中的filename);
    • 要使用哪些加载器(module.loaders)。这里要使用babel来编译jsx和es6的代码。

      总得来说,webpack从entry拿到目标文件,通过loaders进行编译,从output输出,其他功能由plugins引入。
      注:index.js:负责渲染组件到页面上。相当于一个总的出口。因为会自动加载依赖关系,所以webpack.config.js文件只需要配置这一文件即可。
      另外,这个工程比较简单,只需配置一个js文件。

    • 如果要打包多个js文件,这么配置:
    entry: {
      	'file1': './index.js', //key只是个名字,可以自由改
      	'file2': './index2.js'
      }
    
    • 如果需要打包css文件,或解析less文件,需要配置ExtractTextPlugin。详情看官方文档

    4. 在终端执行命令:webpack

      会在build文件夹下生成编译后(未压缩)的js文件,entry.js。如果编译错误会在命令行提示错误原因,entry.js为上一版本的内容。
      你也可以使用其他命令,方便开发:
        webpack -w 监听你的代码修改,实施打包生成entry.js, 一般都直接使用这个命令。
        webpack -p 打包js文件,并压缩。

    5. 开始编码

      完成以上四步,你就可以一边编写代码,用require(es6用import)来加载依赖的模块,一边在浏览器查看效果啦。并且如果以后有新的项目,直接拷贝package.json和webpack.config.js ,秒搭建环境。

    编码阶段

      需要用的react特性有:事件,state,props。依然可以参见上一篇的详细介绍。

    • 每个组件文件都需要引入react import React from 'react';,以及依赖的其他组件。
      index.js还需要引入reactdom import ReactDOM from 'react-dom';,因为渲染页面的方法render()是reactdom的。
    • 用class定义组件,不要忘记使用module.exports = ListWB; 开放组件给其他文件引用。

    index.html

      只需引入一个文件,编译后的文件entry.js。div#place为react组件的父容器。是不是看起来好像什么都没有呢?react中,通过js来插入组件,我们看index.js文件

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>weibo-react</title>
        <link rel="stylesheet" href="css/style.css">
      </head>
      <body>
        <div id="place">
        <!-- 此处插入react插件 -->
        </div>
        <!-- dom定义 -->
        <script src="build/entry.js"></script>
      </body>
    </html>
    

    index.js - js入口文件

      使用自定义的react组件,渲染页面。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import ListWB from  './components/list-wb.jsx';//微博列表组件
    
    var dataList=[{},{}];//这里存储的是后端传来的数据。包括头像,内容,点赞数等等
    ReactDOM.render(<ListWB data={dataList} />,
      document.getElementById('place')
    );
    

      ListWB是微博列表组件,通过自定义属性data传递后端数据,并set到子组件中,展示到页面上。
    注意import ListWB from './components/list-wb.jsx';一定要记得引入自定义组件模块。

    list-wb.jsx - 微博列表组件

    import React from 'react';
    import OneWB from  './one-wb.jsx';//标签的名字根据这个变量名来决定
    
    class ListWB extends React.Component{
      render() {
        // 遍历后端给的数据,并且插入
        var oneWBNodes = this.props.data.map(function(aWB,index){
          return <OneWB oneData={aWB} key={index}></OneWB>;
        });
        return <div>
            {oneWBNodes}
        	</div>;
      }
    }
    module.exports = ListWB;
    

    笔记:

    • map方法会遍历数组中的所有元素,并执行匿名函数,当前元素aWB作为匿名函数第一个实参,当前元素索引index作为第二个实参。this.props.data存储的后端数据list,每个元素执行完匿名函数return的值会连接(相加)起来。所以oneWBNodes得到是OneWB的list。
    • 注意有一个自定义属性key。对于循环出的每个子组件,如果不定义key会报警。
      screenshot
        react中data-reactid的取名方式:
      react_dom_id_1_
        左图为没有数组的“dom树”取名,右图为有数组的“dom树”取名。当图的.0.1是数组时,id会按照右图的虚线框那么取。
        react组件中,每个标签都会有一个唯一的编号data-reactid,如:data-reactid=".0.$0a.0.1.0.1.1"。这里的key是data-reactid的最后一个小数点后面的值。所以key只需要在自己兄弟节点内唯一即可。
        如果不按照要求,让多个子元素的key相同,那么只会识别展示第一个子元素。

    one-wb.jsx - 单个微博组件

      该组件代表单条微博。要处理的有:

    • 属性
      存储了后端传过来的数据。正确分配给子组件或者set到自己的原生属性中。
    • 事件
      触发后使用react的state来自动渲染页面。点击“评论”展开评论块,点击其他(如“转发”,“赞”)收起评论。这里通过给react的state增加一个字段isComment来控制评论区块的展现。点击“评论”,isComment设为true,展示评论区块;否则isComment设为false。
    • JSX中的if-else
      JSX中是没有if-else的(因为jsx只是个语法糖,最终还是要翻译成原生js。比如:
      <div id={if (condition) { 'msg' }}>Hello World!</div>
      编译后是:
    React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
    

      然而我们还是有很多场景需要根据条件判断某些组件要不要展示。
      我们用这几种方式来实现:

    • 三元操作符
    React.render(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);
    
    • 在jsx以外赋值给变量
      var vid='';
      if(condition){
        vid='msg';
      }
      React.render(<div id={vid}>Hello World!</div>, mountNode);
    
    • 立即执行的匿名函数
    <div id={(()=>{
         if(this.state.isComment){
              return 4;
         }
     })()}>
    </div>
    

      匿名函数这种方式也同样可以用在标签中间 <div>{(()=>{//函数内容})()}</div>

      我使用的是第二种方式,代码还是更易维护一些。
      这个文件的代码:

    import React from 'react';
    import CommentForm from './comment-form.jsx';
    import ContentImg from './content-img.jsx';
    
    class OneWB extends React.Component{
      constructor(props){
        super(props);
        this.state={
          isComment:false,
        };
      }
    
      render() {
       var oneData=this.props.oneData;
       var commentForm;
       var contentImgs;
       if(this.state.isComment) {
         //控制评论框是否展现,因为是动态的,所以放在state而不是props
         commentForm =<CommentForm data-my-head-img={oneData.headUrl}/>;
       }
    
       if(oneData.contentImgUrls){
         //若后端给的数据中有图片url,则展示
         contentImgs = <ContentImg content-img-urls={oneData.contentImgUrls} />
       }
       return <div className="big-center" >
         <div className="one-wb ">
           <div className="clearfix">
             <div className="ow-left">
                <img className="nick-img" src={oneData.headUrl}/>
             </div>
             <div className="ow-right">
               <div className="ow-nick row">
                 <span>{oneData.nickName}</span>
               </div>
               <div className="ow-content row">{oneData.content}</div>
               {contentImgs}
             </div>
           </div>
           <div className="ow-footer row ">
             <ul className="clearfix" onClick={this.handlerForwardClick.bind(this)}>
               <li className="li-side-border"><span>收藏</span> {oneData.NoCollect}</li>
               <li className="li-side-border"><span>转发</span> {oneData.NoForward}</li>
               <li className="li-side-border"><span>评论</span> {oneData.NoComment}</li>
               <li><span>赞</span> {oneData.NoPointGreat}</li>
             </ul>
           </div>
         </div>
         {commentForm}
       </div>;
      }
      handlerForwardClick(event) {
        if(event.target.innerText == '评论'){
          this.setState({isComment:true});
        }else{
          this.setState({isComment:false});
    
        }
      }
    }
    module.exports = OneWB;
    
    

    content-img.jsx - 微博图片组件

      因为子组件放在一个数组里,同样需要注意配置key

    import React from 'react';
    
    class ContentImg extends React.Component{
    
      render() {
        var imgNodes=this.props['content-img-urls'].map(function(oneImg,index){
          return <li  key={index} ><img src={oneImg} alt="微博配图" /></li>;
        });
        return <div  className="row extra-content clearfix">
          <ul>
            {imgNodes}
          </ul>
        </div>
      }
    }
    module.exports = ContentImg;
    

    comment-form.jsx - 评论框组件

    import React from 'react';
    
    class CommentForm extends React.Component{
      render() {
        var imgUrl=this.props['data-my-head-img'];
        return <div className="row comment-form clearfix" >
              <div className="ow-left">
                  <img src={imgUrl} alt="头像" className="little-head" />
              </div>
              <div className="ow-right" >
                <textarea name="name" rows="8" cols="40" className="comment-box"></textarea>
                <input className="comment-btn" type="submit" value="评论"/>
              </div>
        </div>;
      }
    }
    module.exports = CommentForm;
    

    效果展示

    screenshot

    总结

      看完这篇文章,相信能够快速在工作当中实践了吧 (≧▽≦)/ 。希望以后能出一些深刻的文章。

  • 相关阅读:
    hdu4578线段树维护平方和,立方和(加,乘,赋值)或者珂朵莉树
    珂朵莉树(ODT老司机树)
    Codeforces Round #524 (Div. 2)D
    HDU1402 FFT高精度乘法模板题
    中国剩余定理poj1006
    POJ
    Install and Config MySQL 8 on Ubuntu
    Protobuf Examples
    Learning Thrift
    Flask Quickstart
  • 原文地址:https://www.cnblogs.com/Mrs-cc/p/4972750.html
Copyright © 2011-2022 走看看