发布日期 » 2019年4月21日 星期日

版权声明 » 自媒体人·陈帅华原创内容,转载请注明出处

React构建个站涂鸦单页应用小记一

春·重返创世 中的涂鸦单页采用React框架构建,目前仅实现核心功能——类似PPT演示,后续逐步增加更多功能。

创世涂鸦 板块

春·重返创世 涂鸦单页交互方式

现成构建环境

NodeJS + NPM + WebPack + React + Babel + JSX + …

帅华君在Github开源了一套基于以上前端技术栈配置的单页面应用构建环境,还在逐步完善中:

https://github.com/lanserdi/fe-webpack-build

一贯思路

一、 数据层

const doodles = [
  './doodles/1.jpg',
  './doodles/2.jpg',
  './doodles/3.jpg',
  './doodles/4.jpg',
  './doodles/5.jpg',
  './doodles/6.jpg'
]

二、 视图层

class App extends React.Component  { /*...*/ }
class Doodles extends React.Component  { /*...*/ }
class Doodle extends React.Component  { /*...*/ }
class DoodleImage extends React.Component  { /*...*/ }

三、控制层

onClick={this.showDoodle.bind(this)}

旧识重提

一、React Fragments

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。

class AppView extends React.Component {
  render(){
    return (
      <React.Fragment>
        <Doodles doodles={this.props.doodles}/>
      </React.Fragment>
    )
  }
}

二、适配涂鸦与屏幕宽高比率

const windowHeight = window.innerHeight,
     windowWidth = window.innerWidth,
     windowWHRatio = +(windowWidth / windowHeight).toFixed(2),
     doodleWHRatio = 1.33
     
let doodleWidth, doodleHeight

if(windowWHRatio < doodleWHRatio){
  doodleWidth = windowWidth - 50
  doodleHeight = parseInt(doodleWidth / doodleWHRatio)
}else{
  doodleHeight = windowHeight
  doodleWidth = parseInt(doodleHeight * doodleWHRatio)
}

三、绑定This指向,数据逆流而上

changeCurrentDoddleIndex={this.changeCurrentDoddleIndex.bind(this)}

四、名称

  • 小驼峰命名属性,绑定点击事件 onClick
  • 添加样式类使用 className="" 而非 class=""
  • 添加内联样式用双花括号 style={{...}},实则为CSS样式的JS属性对象表示法。