HTML5技术

React Native学习笔记 - 用代码做点啥

字号+ 作者:H5之家 来源:H5之家 2016-12-22 16:00 我要评论( )

React 是使用ES6 ,支持JSX语法, 开发组件化web或native的工具. 现阶段使用Babel工具转换成ES5 代码. 组件通过props属性传递不变化的内容,UI通过state属性变动来产生变化. React 一个界面框架, 数据的管理在js中比较麻烦, 容易混乱 . 有个redux库可以管理一个

React 是使用ES6 ,支持JSX语法, 开发组件化web或native的工具. 现阶段使用Babel工具转换成ES5 代码.

组件通过props属性传递不变化的内容,UI通过state属性变动来产生变化.

React 一个界面框架, 数据的管理在js中比较麻烦, 容易混乱 . 有个redux库可以管理一个统一的数据存储点. 一个应用只有一个Store对象,内部是一个全局可随处访问的变量.

 

Redux 的三个概念 :

   container, reduce, actions .

 

1. 创建container, container是一个包含了业务逻辑代码, 负责数据显示过滤和事件绑定的概念. 实际使用connect自动创建.

    包括两个方法 mapStateToProps 和mapDispatchToProps. 最后一句代码connect(mapStateToProps,mapDispatchProps)(UIComponent),有两个括号,第一个里就写这两个定义的方法,后面的括号写这些props要在哪个UI组件类中使用.

 

2. reduce是一个可传递两个参数(state,action) ,返回变化后的state的函数. 核心概念是不直接修改state值,通过Object.assign({},state,{要覆盖的新值属性keyvalue}) 创建新对象返回.

3. actions 是一些functions 表示执行的动作,方法名可以定义为addNews,listNews,delNews这种动词,实际直接返回一个{key:"ADD_NEWS","other":"dfdsfdsf"},除key以外可以定义传递给事件处理需要的参数.

 

4.怎么触发action? 

 通过全局方法dispatch(action,自定义参数)触发.

 

5.组件中的事件最好写成closure的形式,其他形式可能会无法找到方法之类的,原理就是此this不是需要的this导致.

closure 写法: 

 var clickGetUserInfo = (id)=> {

   this.refs.uiEle.text = "23421323" 

 }

 

  render() {

    <View onClick={clickGetUserInfo} ref="uiEle">

 } 

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • react动画难写?试试react版transformjs - 【当耐特】

    react动画难写?试试react版transformjs - 【当耐特】

    2016-12-19 14:00

  • Bootstrap 我的学习记录4 轮播图的使用和理解 - 浪迹灬天涯

    Bootstrap 我的学习记录4 轮播图的使用和理解 - 浪迹灬天涯

    2016-12-17 10:01

  • Bootstrap 我的学习记录3 导航条理解 - 浪迹灬天涯

    Bootstrap 我的学习记录3 导航条理解 - 浪迹灬天涯

    2016-12-17 10:00

  • Bootstrap 我的学习记录2 栅格系统初识 - 浪迹灬天涯

    Bootstrap 我的学习记录2 栅格系统初识 - 浪迹灬天涯

    2016-12-14 12:01

网友点评