React构建个站涂鸦单页

全篇共 1222 字。按500字/分钟阅读速度,阅读完预计需要 2.4 分钟。

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

构建环境

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日 周日
更新日期 » 2020年1月18日 周六
上一篇 » [译] Redis遇见Nodejs
下一篇 » 如何给文章设计精美封面
:)记录此刻想法
请选择登录方式,开始记录你的想法。
授权微博登录
授权Github登录