达内2016前端开发知识点总结--React.js--2天

React  day01

 

 

目标：2048游戏 -》 移植到手机上应用

 

步骤1：加入zepto中的touch模块，能够检测到上下左右的滑动

关键词：swipeUp swipeDown swipeLeft swipeRight

结果：通过上下左右的滑动  能够打印出往左右滑动

 

注意：$符号的冲突 通过chrome内置的手机模拟效果去调试

Zepto('#grid_panel').on

 

步骤2：调整grid、cell的宽高适应当前屏幕

分析：计算当前视窗的宽和高，同时计算每一个grid和cell的宽高、距离上边左边的margin；同时通过zepto来设置css

 

①拿到实际的宽和高  width height

②计算grid/cell宽度、高度

cell之间base-margin-left base-margin-top 约定为cell本身宽度、高度的1/4 -->  

 

cell-width  :    5*1/4*(cell-width)+4*(cell-width) = width

 

-》（cell-width）*(21/4)=width

 

cell-height :   5*1/4*(cell-height)+4*(cell-height) = height

base-marign-left:  (1/4)*cell-width

base-marign-top:  (1/4)*cell-height

 

③ 将得到*width *height  应用到元素。

1、将之前写死的数据 删除掉--》 zepto找到元素 css方法去设置

2、设置gridPanel宽高

3、设置grid、cell宽高

4、同时设置id=g00 01...g30 .. g33  top/left

  id=c00 c01...c30 .. c33  top/left

 

 

步骤3：

①部署在新浪云

分析：创建sae应用，将代码和对应的zepto通过代码管理进行上传

②(apache服务，把工程htdoc，localhost)

 

 

步骤4：创建基于webview的混合应用，生成移动端的app

①eclipse 新建android工程

②直接在java文件中，使用webView 载入指定的网页 setContentView 允许执行js

③加上网络权限

 

 

 

 

 

 

 

 

React day02

 

 

命令行：

https://github.com/facebookincubator/create-react-app

 

一、state

state状态：只要更新state，就会根据state重新渲染用户界面，react来处理如何最高效的更新DOM。（类似ng中的方向1数据绑定）

 

how？

初始化状态： getInitialState  定义状态（返回一个对象）

设置状态： setState({}) 修改状态

读取状态： this.state.状态名称

 

练习：周六Main、A、B通信的案例，数据存储的result替换成状态来完成数据的读写。

 

二、React组件的生命周期

 

生命周期的3个阶段：

mount 插入到DOM

update 重新渲染

unmount 从DOM移除

 

3个阶段的处理函数：

componentWillMount() 准备插入

componentDidMount()  已经插入

 

componentWillUpdate(props，state) 准备更新

componentDidUpdate(props，state)  已经更新

 

componentWillUnmount（） 准备从DOM中移除

 

练习： state和生命周期的处理函数

 

在组件插入到真实DOM节点之后，启动定时器修改组件的透明度（0-1）

 

状态：透明度的值 opacityValue

组件：

style='opacity:{this.state.opacityValue}'--->

style={{opacity:this.state.opacityValue}}

 

三、事件

 

将React组件中的方法分为两大类：

①React自有的方法：生命周期、render。。

ComponentWill/DidMount/Update/Unmount/render/getInitialState

②用户自定义的方法，遵循驼峰式命名：handleChange handleClick （handle+eventName）

采用标准的事件对象。

 

基于事件，完成功能：

组件，div，鼠标的滚轮在div上滚动时，改变背景色(随机颜色)

 

①创建组件

②指定事件 onWheel  handleWheel

③状态（初始化、设置、读取）

 

四、表单组件

 

表单元素有以下的属性设置都是受控组件：

value (input textarea)

checked (checkbox radio)

selected( option)

 

其余的都是非受控组件。

 

结合着onChange、value/checked一起来解决受控组件的问题。

 

五、toDoList

 

功能点：

①输入数据，在列表中增加一个待做事项

②点击delete按钮，从列表中删除一个事项

 

步骤1：将应用划分成组件 ToDoBox:ToDoInput + ToDoList(多个ToDoItem构成)

步骤2：创建组件，并先能模拟数据显示出来

步骤3: add

①初始化状态：数组

②添加向指定数组插入一条数据

③显示

步骤4:delete

就是从数组中删除一条数据。