【React】 React的优点+实现分页组件

来源：互联网发布：干部网络培训怎么快速编辑：程序博客网时间：2024/05/16 09:50

在上一篇文章中，介绍了React为什么会被创建，但是翻译完那篇文章后，并没有解答我的问题，我为什么要用React。
在学习React一个多月之后，通过学习教程和官方API，也有了一些自己的理解。

React的优点：

简单
仅仅只要表达出你的应用程序在任一个时间点应该长的样子，当底层的数据变了，React 会自动处理所有用户界面的更新。

声明式 (Declarative)
数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。

构建可组合的组件
React 都是关于构建可复用的组件。事实上，通过 React 你唯一要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单。

虚拟DOM
React采取了一种特立独行的操作DOM的方式，它并不直接对DOM进行操作，而是引入了虚拟DOM的概念，安插在JavaScript逻辑和实际的DOM之间。这一概念提高了Web性能。在UI渲染过程中，React通过在虚拟DOM中的微操作来实对现实际DOM的局部更新。

单向数据流让事情一目了然
Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。它只是一个概念，而非特定工具的实现。它可以被其它框架吸纳。React中的数据从父级流向子级。

使用步骤：

1、拿到一个构建页面的时候，首先要将其转化成组件树。
    意思就是，你要看一下这个页面需要拆成几个组件。秉承的原则就是，一个组件完成一个功能。我的做法是将需要做的组件写出来，连同它要完成的功能都写出来
2、用React创建构建页面的静态版本
     这一步会构造一些组件，这些组件重用其它组件，并且通过 props 传递数据。 props 是一种从父级向子级传递数据的方式。 state 仅用于实现交互功能，也就是说，数据随着时间变化。因为这是一个静态的应用版本，所以这里并不需要 state 。
    可以从上至下或者从下至上来构建应用。也就是说，你可以从属性结构的顶部开始构建这些组件，或者从底部开始。我选择从下至上的方式，这样也可以在构建的同时写测试代码。
注：写的时候会用到构建中的css类名，这时候要注意react中是用className来加类名的

3、实现交互功能
这一步就是要弄清楚，数据是怎么传输的。props可以让数据从父级传递到子级，而有时候我们会需要数据的反向传递，即从子组件传递用户输入给父组件，这个时候就需要回调函数了。
我的项目中，所有的state都放在了父组件中，通过props向子组件中传递数据。在子组件中会有回调函数，用该函数来向父组件中传递数据。

Demo:用react实现分页组件
详情请移步github

import React from 'react';import ReactDOM from 'react-dom';//分页组件export default class extends React.Component{    constructor() {        super();        this.state = {            showLinkNum : 5 //每次显示的页数        }           }    //控制页码跳转的函数    pageIndexChange(event){        let target = event.target;        let index = "";        let pageIndex = target.value;        let pageInputIndex = target.value;        var type = target.getAttribute("data-type");        if (type == "link") {            index = event.target.innerHTML;            if (!isNaN(index)) {                pageIndex = index;            }else if (index =="首页") {                pageIndex = 1;            }else if (index == "尾页") {                pageIndex = this.props.pageNum;            }else if (index == "»") {                pageIndex = parseInt(this.props.pageIndex) + 1;                         }else if (index == "«") {                pageIndex = parseInt(this.props.pageIndex) - 1;                         }            this.props.pageIndexChange(pageIndex);                          }else if (type == "btn-go") {            let goIndex = document.getElementById("index-input");            pageInputIndex = goIndex.value;            this.props.pageIndexChange(pageInputIndex);        }else if (type == "input") {            return null;        }               }    render(){           var arrFirst = [];//首页和前一页        var arrLast = [];//尾页和后一页        var arrLinkShow = []; //每次显示的页码        var prevDisplay = 1 == this.props.pageIndex ? 'disabled': ''; //当前页为1时，首页和前一页失效        var lastDisplay = this.props.pageNum == this.props.pageIndex ? 'disabled':'';//当前页为最后一页时，尾页和后一页失效               var startIndex = (Math.ceil(this.props.pageIndex/this.state.showLinkNum)-1) * this.state.showLinkNum + 1;//每次显示页数的开始页        var endIndex = Math.min(startIndex + this.state.showLinkNum,(this.props.pageNum+1));//每次显示页数的结束页        for ( var i = startIndex; i　< endIndex; i++ ) {            var currentIndexDisplay = i == this.props.pageIndex ? 'active' : '';            arrLinkShow.push(                <li key = {i} className = {currentIndexDisplay}>                    <a href="javascript:;" data-type = "link">{i}</a>                </li>                )        }        arrFirst.push(            <li key="first" className = {prevDisplay}>                <a href="javascript:;" data-type = "link" >首页</a>            </li>                           );        arrFirst.push(            <li key = "1" className = {prevDisplay}>                <a href="javascript:;" aria-label="Previous" data-type = "link" id = "pre" >                    «                </a>            </li>            );         arrLast.push(            <li key = "last" className = {lastDisplay}>                <a href="javascript:;" data-type = "link">尾页</a>            </li>                           );        arrLast.push(            <li key ={this.props.pageNum} className = {lastDisplay} >                <a href="javascript:;" aria-label="Next" data-type = "link" id = "next">                 »                </a>            </li>            )              return (            <nav className="text-right" key="page">                <ul className="pagination" onClick = {this.pageIndexChange.bind(this)}>                    {arrFirst}                    {arrLinkShow}                                    {arrLast}                                                          <li>                              <input type="text" data-type = "input" id="index-input" />                       <a href="javascript:;" className="btn page-go" data-type = "btn-go">跳转</a>                    </li>                                                               </ul>            </nav>        )    }}

0 0