2. 程式人生 > >基於 React 實現一個 Transition 過渡動畫元件

基於 React 實現一個 Transition 過渡動畫元件

阿新 • • 發佈：2020-02-28

過渡動畫使 UI 更富有表現力並且易於使用。如何使用 React 快速的實現一個 Transition 過渡動畫元件？

基本實現

實現一個基礎的 CSS 過渡動畫元件，通過切換 CSS 樣式實現簡單的動畫效果，也就是通過新增或移除某個 class 樣式。因此需要給 Transition 元件新增一個 toggleClass 屬性，標識要切換的 class 樣式，再新增一個 action 屬性實現樣式切換，action 為 true 時新增 toggleClass 到動畫元素上，action 為 false 時移除 toggleClass。

安裝 classnames 外掛：

npm install classnames --save-dev

classnames 是一個簡單的JavaScript實用程式，用於有條件地將 className 連線在一起。

在 components 目錄下新建一個 Transition 資料夾，並在該資料夾下新建一個 Transition.jsx 檔案：

import React from 'react'
import classnames from 'classnames'

/**
 * css過渡動畫元件
 *
 * @visibleName Transition 過渡動畫
 */
class Transition extends React.Component {
  render() {
    const { children } = this.props
    const transition = (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true
            })
          }
        >
          { children }
        </div>
      </div>
    )
    return transition
  }
}

export default Transition

這裡使用了 JSX，在 JSX 中，使用 camelCase（小駝峰命名）來定義屬性的名稱，使用大括號“{}”嵌入任何有效的 JavaScript 表示式。
如：

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

等價於：

const element = <h1>Hello, Josh Perez</h1>;

注意：
因為 JSX 語法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小駝峰命名）來定義屬性的名稱，而不使用 HTML 屬性名稱的命名約定。
例如，JSX 裡的 class 變成了 className，而 tabindex 則變為 tabIndex。

另外，在 React 中，props.children
包含元件所有的子節點，即元件的開始標籤和結束標籤之間的內容（與 Vue 中 slot 插槽相似）。例如：

<Button>預設按鈕</Button>

在 Button 元件中獲取 props.children，就可以得到字串“預設按鈕”。

接下來，在 Transition 資料夾下新建一個 index.js，匯出 Transition 元件：

import Transition from './Transition.jsx'

export { Transition }

export default Transition

然後，在 Transition.jsx 檔案中為元件新增 props 檢查並設定 action 的預設值：

import PropTypes from 'prop-types'

const propTypes = {
  /** 執行動畫 */
  action: PropTypes.bool,
  /** 切換的css動畫的class名稱 */
  toggleClass: PropTypes.string
}

const defaultProps = {
  action: false
}

這裡使用了 prop-types 實現執行時型別檢查。

注意：
prop-types 是一個執行時型別檢查工具，也是 create-react-app 腳手架預設配置的執行時型別檢查工具，使用時直接引入即可，無需安裝。

完整的 Transition 元件程式碼如下：

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

const propTypes = {
  /** 執行動畫 */
  action: PropTypes.bool,
  /** 切換的css動畫的class名稱 */
  toggleClass: PropTypes.string
}

const defaultProps = {
  action: false
}

/**
 * css過渡動畫元件
 *
 * @visibleName Transition 過渡動畫
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  render() {
    const {
      className,
      action,
      toggleClass,
      children
    } = this.props
    const transition = (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass
            })
          }
        >
          { children }
        </div>
      </div>
    )
    return transition
  }
}

export default Transition

現在，可以使用我們的 Transition 元件了。

CSS 程式碼如下：

.fade {
  transition: opacity 0.15s linear;
}

.fade:not(.show) {
  opacity: 0;
}

JS 程式碼如下：

import React from 'react';
import Transition from './Transition';

class Anime extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      action: true
    }
  }
  
  render () {
    const btnText = this.state.action ? '淡出' : '淡入'
    return (
      <div>
        <Transition
          className="fade"
          toggleClass="show"
          action={ this.state.action }
        >
          淡入淡出
        </Transition>
        <button
          style={{ marginTop: '20px' }}
          onClick={() => this.setState({ action: !this.state.action })}
        >
          { btnText }
        </button>
      </div>
    )
  }
}

然後，在你需要該動畫的地方使用 Anime 元件即可。

實現 Animate.css 相容

Animate.css 是一款強大的預設 CSS3 動畫庫。接下來，實現在 Transition 元件中使用 Animate.css 實現強大的 CSS3 動畫。

由於 Animate.css 動畫在進入動畫和離開動畫通常使用兩個效果相反的 class 樣式，因此，需要給 Transition 元件新增 enterClass 和 leaveClass 兩個屬性，實現動畫切換。

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

const propTypes = {
  /** 執行動畫 */
  action: PropTypes.bool,
  /** 切換的css動畫的class名稱 */
  toggleClass: PropTypes.string,
  /** 進入動畫的class名稱，存在 toggleClass 時無效 */
  enterClass: PropTypes.string,
  /** 離開動畫的class名稱，存在 toggleClass 時無效 */
  leaveClass: PropTypes.string
}

const defaultProps = {
  action: false
}

/**
 * css過渡動畫元件
 *
 * @visibleName Transition 過渡動畫
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  render() {
    const {
      className,
      action,
      toggleClass,
      enterClass,
      leaveClass,
      children
    } = this.props
    return (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass,
              [enterClass]: !toggleClass && action && enterClass,
              [leaveClass]: !toggleClass && !action && leaveClass,
            })
          }
        >
          { children }
        </div>
      </div>
    )
  }
}

export default Transition

注意：
由於 toggleClass 適用於那些進入動畫與離開動畫切換相同 class 樣式的情況，而 enterClass 和 leaveClass 適用於那些進入動畫與離開動畫切換不同的 class 樣式的情況，所以，他們與 toggleClass 不能共存。

接下來，就可以試一試加入 Animate.css 後的 Transition 元件：

import React from 'react';
import 'animate.css';

class Anime extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      action: true
    }
  }
  
  render () {
    return (
      <div>
        <Transition
          className="animated"
          enterClass="bounceInLeft"
          leaveClass="bounceOutLeft"
          action={ this.state.action }
        >
          彈入彈出
        </Transition>
        <utton
          style={{ marginTop: '20px' }}
          onClick={() => this.setState({ action: !this.state.action })}
        >
          { this.state.action ? '彈出' : '彈入' }
        </utton>
      </div>
    )
  }
}

功能擴充套件

通過上面的實現，Transition 元件能適用大部分場景，但是功能不夠豐富。因此，接下來就需要擴充套件 Transition 的介面。動畫通常可以設定延遲時間，播放時長，播放次數等屬性。因此，需要給 Transition 新增這些屬性，來豐富設定動畫。

新增如下 props 屬性，並設定預設值：

const propTypes = {
  ...,
  /** 動畫延遲執行時間 */
  delay: PropTypes.string,
  /** 動畫執行時間長度 */
  duration: PropTypes.string,
  /** 動畫執行次數，只在執行 CSS3 動畫時有效 */
  count: PropTypes.number,
  /** 動畫緩動函式 */
  easing: PropTypes.oneOf([
    'linear',
    'ease',
    'ease-in',
    'ease-out',
    'ease-in-out'
  ]),
  /** 是否強制輪流反向播放動畫，count 為 1 時無效 */
  reverse: PropTypes.bool
}

const defaultProps = {
  count: 1,
  reverse: false
}

根據 props 設定樣式：

// 動畫樣式
const styleText = (() => {
  let style = {}
  // 設定延遲時長
  if (delay) {
    style.transitionDelay = delay
    style.animationDelay = delay
  }
  // 設定播放時長
  if (duration) {
    style.transitionDuration = duration
    style.animationDuration = duration
  }
  // 設定播放次數
  if (count) {
    style.animationIterationCount = count
  }
  // 設定緩動函式
  if (easing) {
    style.transitionTimingFunction = easing
    style.animationTimingFunction = easing
  }
  // 設定動畫方向
  if (reverse) {
    style.animationDirection = 'alternate'
  }
  return style
})()

完整程式碼如下：

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

const propTypes = {
  /** 執行動畫 */
  action: PropTypes.bool,
  /** 切換的css動畫的class名稱 */
  toggleClass: PropTypes.string,
  /** 進入動畫的class名稱，存在 toggleClass 時無效 */
  enterClass: PropTypes.string,
  /** 離開動畫的class名稱，存在 toggleClass 時無效 */
  leaveClass: PropTypes.string,
  /** 動畫延遲執行時間 */
  delay: PropTypes.string,
  /** 動畫執行時間長度 */
  duration: PropTypes.string,
  /** 動畫執行次數，只在執行 CSS3 動畫時有效 */
  count: PropTypes.number,
  /** 動畫緩動函式 */
  easing: PropTypes.oneOf([
    'linear',
    'ease',
    'ease-in',
    'ease-out',
    'ease-in-out'
  ]),
  /** 是否強制輪流反向播放動畫，count 為 1 時無效 */
  reverse: PropTypes.bool
}

const defaultProps = {
  action: false,
  count: 1,
  reverse: false
}

/**
 * css過渡動畫元件
 *
 * @visibleName Transition 過渡動畫
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  render() {
    const {
      className,
      action,
      toggleClass,
      enterClass,
      leaveClass,
      delay,
      duration,
      count,
      easing,
      reverse,
      children
    } = this.props

    // 動畫樣式
    const styleText = (() => {
      let style = {}
      // 設定延遲時長
      if (delay) {
        style.transitionDelay = delay
        style.animationDelay = delay
      }
      // 設定播放時長
      if (duration) {
        style.transitionDuration = duration
        style.animationDuration = duration
      }
      // 設定播放次數
      if (count) {
        style.animationIterationCount = count
      }
      // 設定緩動函式
      if (easing) {
        style.transitionTimingFunction = easing
        style.animationTimingFunction = easing
      }
      // 設定動畫方向
      if (reverse) {
        style.animationDirection = 'alternate'
      }
      return style
    })()

    return (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass,
              [enterClass]: !toggleClass && action && enterClass,
              [leaveClass]: !toggleClass && !action && leaveClass,
            })
          }
          style={ styleText }
        >
          { children }
        </div>
      </div>
    )
  }
}

export default Transition

這裡為 Transition 增加了以下設定屬性：

  • delay：規定在動畫開始之前的延遲。
  • duration：規定完成動畫所花費的時間，以秒或毫秒計。
  • count：規定動畫應該播放的次數。
  • easing：規定動畫的速度曲線。
  • reverse：規定是否應該輪流反向播放動畫。

目前，Transition 的功能已經相當豐富，可以很精細的控制 CSS3 動畫。

優化

這一步，我們需要針對 Transition 元件進一步優化，主要包括動畫結束的監聽、解除安裝元件以及相容。

新增以下 props 屬性，並設定預設值：

const propTypes = {
  ...,
  /** 動畫結束的回撥 */
  onEnd: PropTypes.func,
  /** 離開動畫結束時解除安裝元素 */
  exist: PropTypes.bool
}

const defaultProps = {
  ...,
  reverse: false,
  exist: false
}

處理動畫結束的監聽事件：

/**
 * css過渡動畫元件
 *
 * @visibleName Transition 過渡動畫
 */
class Transition extends React.Component {

  ...

  onEnd = e => {
    const { onEnd, action, exist } = this.props
    if (onEnd) {
      onEnd(e)
    }
    // 解除安裝 DOM 元素
    if (!action && exist) {
      const node = e.target.parentNode
      node.parentNode.removeChild(node)
    }
  }

  /**
   * 對動畫結束事件 onEnd 回撥的處理函式
   *
   * @param {string} type - 事件解繫結型別: add - 繫結事件，remove - 移除事件繫結
   */
  handleEndListener (type = 'add') {
    const el = ReactDOM.findDOMNode(this).querySelector('.transition-wrapper')
    const events = ['animationend', 'transitionend']
    events.forEach(ev => {
      el[`${type}EventListener`](ev, this.onEnd, false)
    })
  }

  componentDidMount () {
    this.handleEndListener()
  }

  componentWillUnmount () {
    const { action, exist } = this.props
    if (!action && exist) {
      this.handleEndListener('remove')
    }
  }

  render () {
    ...
  }
}

這裡使用到兩個生命週期函式 componentDidMount 和 componentWillUnmount，關於 React 生命週期的介紹請移步元件生命週期。

react-dom 提供了可在 React 應用中使用的 DOM 方法。

獲取相容性的 animationend 事件和 transitionend 事件。不同的瀏覽器要求使用不同的字首，因為火狐和IE都已經支援了這兩個事件，因此，只需針對 webkit 核心瀏覽器進行相容的 webkitTransitionEnd 事件檢測。檢測函式程式碼如下：

/**
 * 瀏覽器相容事件檢測函式
 *
 * @param {node} el - 觸發事件的 DOM 元素
 * @param {array} events - 可能的事件型別
 * @returns {*}
 */
const whichEvent = (el, events) => {
  const len = events.length
  for (var i = 0; i < len; i++) {
    if (el.style[i]) {
      return events[i];
    }
  }
}

修改 handleEndListener 函式：

/**
 * css過渡動畫元件
 *
 * @visibleName Transition 過渡動畫
 */
class Transition extends React.Component {

  ...

  /**
   * 對動畫結束事件 onEnd 回撥的處理函式
   *
   * @param {string} type - 事件解繫結型別: add - 繫結事件，remove - 移除事件繫結
   */
  handleEndListener (type = 'add') {
    const el = ReactDOM.findDOMNode(this).querySelector('.transition-wrapper')
    const events = ['AnimationEnd', 'TransitionEnd']
    events.forEach(ev => {
      const eventType = whichEvent(el, [ev.toLowerCase(), `webkit${ev}`])
      el[`${type}EventListener`](eventType, this.onEnd, false)
    })
  }

  ...

}

到這裡，我們完成了整個 Transition 元件的開發，完整程式碼如下：

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import ReactDOM from 'react-dom'

const propTypes = {
  /** 執行動畫 */
  action: PropTypes.bool,
  /** 切換的css動畫的class名稱 */
  toggleClass: PropTypes.string,
  /** 進入動畫的class名稱，存在 toggleClass 時無效 */
  enterClass: PropTypes.string,
  /** 離開動畫的class名稱，存在 toggleClass 時無效 */
  leaveClass: PropTypes.string,
  /** 動畫延遲執行時間 */
  delay: PropTypes.string,
  /** 動畫執行時間長度 */
  duration: PropTypes.string,
  /** 動畫執行次數，只在執行 CSS3 動畫時有效 */
  count: PropTypes.number,
  /** 動畫緩動函式 */
  easing: PropTypes.oneOf([
    'linear',
    'ease',
    'ease-in',
    'ease-out',
    'ease-in-out'
  ]),
  /** 是否強制輪流反向播放動畫，count 為 1 時無效 */
  reverse: PropTypes.bool,
  /** 動畫結束的回撥 */
  onEnd: PropTypes.func,
  /** 離開動畫結束時解除安裝元素 */
  exist: PropTypes.bool
}

const defaultProps = {
  action: false,
  count: 1,
  reverse: false,
  exist: false
}

/**
 * 瀏覽器相容事件檢測函式
 *
 * @param {node} el - 觸發事件的 DOM 元素
 * @param {array} events - 可能的事件型別
 * @returns {*}
 */
const whichEvent = (el, events) => {
  const len = events.length
  for (var i = 0; i < len; i++) {
    if (el.style[i]) {
      return events[i];
    }
  }
}

/**
 * css過渡動畫元件
 *
 * @visibleName Transition 過渡動畫
 */
class Transition extends React.Component {

  static propTypes = propTypes

  static defaultProps = defaultProps

  onEnd = e => {
    const { onEnd, action, exist } = this.props
    if (onEnd) {
      onEnd(e)
    }
    // 解除安裝 DOM 元素
    if (!action && exist) {
      const node = e.target.parentNode
      node.parentNode.removeChild(node)
    }
  }

  /**
   * 對動畫結束事件 onEnd 回撥的處理函式
   *
   * @param {string} type - 事件解繫結型別: add - 繫結事件，remove - 移除事件繫結
   */
  handleEndListener (type = 'add') {
    const el = ReactDOM.findDOMNode(this).querySelector('.transition-wrapper')
    const events = ['AnimationEnd', 'TransitionEnd']
    events.forEach(ev => {
      const eventType = whichEvent(el, [ev.toLowerCase(), `webkit${ev}`])
      el[`${type}EventListener`](eventType, this.onEnd, false)
    })
  }

  componentDidMount () {
    this.handleEndListener()
  }

  componentWillUnmount() {
    const { action, exist } = this.props
    if (!action && exist) {
      this.handleEndListener('remove')
    }
  }

  render () {
    const {
      className,
      action,
      toggleClass,
      enterClass,
      leaveClass,
      delay,
      duration,
      count,
      easing,
      reverse,
      children
    } = this.props

    // 動畫樣式
    const styleText = (() => {
      let style = {}
      // 設定延遲時長
      if (delay) {
        style.transitionDelay = delay
        style.animationDelay = delay
      }
      // 設定播放時長
      if (duration) {
        style.transitionDuration = duration
        style.animationDuration = duration
      }
      // 設定播放次數
      if (count) {
        style.animationIterationCount = count
      }
      // 設定緩動函式
      if (easing) {
        style.transitionTimingFunction = easing
        style.animationTimingFunction = easing
      }
      // 設定動畫方向
      if (reverse) {
        style.animationDirection = 'alternate'
      }
      return style
    })()

    const transition = (
      <div
        className={
          classnames({
            transition: true
          })
        }
        style={
          {
            position: 'relative',
            overflow: 'hidden'
          }
        }
      >
        <div
          className={
            classnames({
              'transition-wrapper': true,
              [className]: className,
              [toggleClass]: action && toggleClass,
              [enterClass]: !toggleClass && action && enterClass,
              [leaveClass]: !toggleClass && !action && leaveClass,
            })
          }
          style={ styleText }
        >
          { children }
        </div>
      </div>
    )

    return transition
  }
}

export default Transition

原文地址：基於 React 實現一個 Transition 過渡動畫組

相關推薦

基於 React 實現一個 Transition 過渡動畫元件

過渡動畫使 UI 更富有表現力並且易於使用。如何使用 React 快速的實現一個 Transition 過渡動畫元件？ 基本實現 實現一個基礎的 CSS 過渡動畫元件，通過切換 CSS 樣式實現簡單的動畫效果，也就是通過新增或移除某個 class 樣式。因此需要給 Transition 元件新增一個 togg

基於react的一個進度條元件

1.在react建一個js檔案寫元件程式碼: import React, {Component, PropTypes} from 'react'; export default class Progress extends Component { static contextTypes =

開發一個基於React Native的簡易demo--視訊元件+佈局

一、視訊元件 yarn add --save react-native-video react-native link 編碼 import Video from 'react-native-video'; ... <Video r

基於servlet實現一個web框架

-i writer pattern mic mar ems hack dem 包括 servlet作為一個web規範。其本身就算做一個web開發框架，可是其web action (響應某個URI的實現)的實現都是基於類的，不是非常方便，而且3.0之前的版本號還必須通過

QT 中如何實現一個簡單的動畫

QT可以實現一下簡單的動畫，比如 運動的時鐘 閃爍的按鈕。 動畫的實現： （1）建立一個定時器 （2）呼叫QWidget::update()通知介面重繪 實現一個按鈕閃爍的例子： circlewidget.h #ifndef CIRCLAWIDGET_H #define CIRCLAWIDG

100行程式碼實現一個vue分頁元件

今天用vue來實現一個分頁元件，總體來說，vue實現比較簡單，樣式部分模仿了elementUI。所有程式碼的原始碼可以再github上下載的到：下載地址 先來看一下實現效果： 點選檢視效果 整體思路 我們先看一下使用到的檔案的目錄： 我們在 pageComponentsTe

Vue學習之路（七）---transition過渡動畫

vue中過度動畫v-if和v-show都可以使用，首先要明白四個狀態，v-enter(剛開始進入) ，v-enter-active(進入過程中到進入完畢),v-leave-enter(剛開始離開),v-leave-enter-active(離開過程中到離開)，示例圖如下 好的，弄

手把手教你實現一個 Vue 進度條元件！

最近在個人的專案中，想對頁面之間跳轉的過程進行優化，想到了很多文件或 npm 等都用到的頁面跳轉進度條，於是便想自己去實現一個，特此記錄。 來看下 npm 搜尋元件時候的效果： so 下面咱們一起動手實現一下唄。 定義使用方式 想實現一個元件的前提，一定要想好你的需求是什麼，還要自己去定義一

用canvas實現一個vue彈幕元件

看B站時，對彈幕的實現產生了興趣，一開始想到用css3動畫去實現，後來感覺這樣效能不是很好，查了下資料，發現可以用canvas實現，於是就摸索著寫了一個簡單的彈幕。 彈幕功能 支援動態新增彈幕 彈幕不重疊 自定義彈幕顏色 效果圖 demo  原始碼地址 前端框架選了比較熟悉的vuejs

基於c++實現RTSP/RTMP推流元件PushStream簡介

技術在於交流、溝通，轉載請註明出處並保持作品的完整性。 原文：https://blog.csdn.net/hiwubihe/article/details/84639975  [本系列相關文章]   本篇介紹一個基於C++開發的RTSP/RTMP推流元件Pus

用React實現一個自動生成文章目錄的組件

name 地址 ati type soc 非貪婪 開發者 component key 原文地址：小寒的博客 功能介紹 這個組件的效果吶，就是你在瀏覽這個頁面的時候點擊右上角的叉叉看到的那個文章目錄。 功能很簡單，就是根據文章內容自動生成這個目錄，可以快速跳轉。

v-model語法糖介紹，實現一個自定義input元件

html: <template> <div class="jsInput"> <div class="jsInput-content"> <input class="my-input" :type="type" @focus=

如何實現一個IOS網路監控元件

此文由作者朱志強授權網易雲社群釋出。 Mobile Application Monitor IOS元件設計技術分享 背景 應用程式效能管理Application Performance Management（APM）是近年來比較火的網際網路產業， Mobile Application Monitor（MAM

CSS3 不執行 Transition 過渡動畫

如果元素設定了transition，那麼當 JavaScript 改變相應屬性值的時候，就會觸發該過渡動畫。 有時候，我們想直接設定該值，而不觸發過渡動畫，最直觀的想法就是先設定 transition-duration 為0，然後設定該值，最後恢復 transi

react 實現一個無限循環的輪播器 附github地址

class 不為 cursor oot rect 動畫 參數類型 4.0 z-index 一個簡單的輪播 為了更具有通用和參考性,輪播組件中，輪播只使用了react,沒有添加其他的狀態管理，或者參數類型限制的庫. github地址 最終效果 顯示無限循環原理 如圖所示，如

ionic-基於angularjs實現的多級城市選擇元件

今天是2016年12月25日，也即是西方的聖誕節，本來是好日子，不過今天卻沒能放假，得調休補班。 最近身邊的朋友，夥計一起談論的最多的就是創業話題，今年是一個資本的寒冬年，但也是一個網際網路企業開始收

基於ftp實現一個類dropbox檔案同步程式

最近要在實驗室和宿舍兩頭跑，同一臺電腦上還有win和linux等多個系統，想要在任何一個地點和平臺上繼續看之前的文獻實在有點麻煩，只能拿U盤來拷，但是我的U盤又很容易掉，萬一掉了那辛苦工作的成果可就全沒了。你說網盤吧，百度網盤又不合我意，同步太麻煩了。最符合我想

React 實現一個漂亮的 Table

概述 對於企業級後臺產品來說，Table 應該是使用最頻繁的元件了，它通常比 Form 和 Chart 的使用還頻繁。對於這麼一個常用的元件，我們決定要把它從 RSuite 中單獨出來開發，並且要具有一定的通用性，適應很多場景。 首先看一下，Table 完成的效果。 預覽

C 基於UDP實現一個簡易的聊天室

引言 本文是圍繞Linux udp api 構建一個簡易的多人聊天室.重點看思路,幫助我們加深 對udp開發中一些api瞭解.相對而言udp socket開發相比tcp socket開發注意的細節要少很多. 但是水也很深. 本文就當是一個demo整合幫助開發者回顧和繼續瞭解

koa2 + react 實現一個登入Demo

該專案使用了koa2 + react + react-router(4.0) + redux + webpack等流行技術，在專案中記錄的一些知識點和爬坑筆記。比如對redux的資料流的理解，react-router 4.0.0 的新語法等詳細可以去專案中看。