React构建个站涂鸦单页

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

构建环境

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

一贯思路

一、 数据层

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属性对象表示法。

版权声明 » 自由转载-署名-非商用-相同方式共享

作者署名 » 陈帅华-探索技术艺术与国学之美

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

我要留言