看了本身那篇CR-VN你就入门了

看了本身那篇CR-VN你就入门了

React 是行使ES6 ,接济JSX语法, 开采组件化web或native的工具.
现阶段采用Babel工具转变到ES五 代码.

React Native学习笔记,reactnative

React 是行使ES陆 ,扶助JSX语法, 开拓组件化web或native的工具.
现阶段应用Babel工具转变来ES5 代码.

组件通过props属性传递不扭转的原委,UI通过state属性别变化动来发生变化.

React 一个分界面框架, 数据的管制在js中比较费心, 轻巧混乱 .
有个redux库能够管理二个统1的数额存储点.
1个应用唯有1个Store对象,内部是三个大局可四海访问的变量.

 

Redux 的四个概念 :

   container, reduce, actions .

 

  1. 创造container, container是3个涵盖了政工逻辑代码,
    担当数据体现过滤和事件绑定的概念. 实际运用connect自动成立.

    包罗三个章程 mapStateToProps 和mapDispatchToProps.
最后一句代码connect(mapStateToProps,mapDispatchProps)(UIComponent),有三个括号,第多个里就写那八个概念的艺术,后面包车型客车括号写这一个props要在哪个UI组件类中使用.

 

  1. reduce是1个可传递多少个参数(state,action) ,重临变化后的state的函数.
    核心概念是不直接退换state值,通过Object.assign({},state,{要遮盖的新值属性keyvalue})
    成立新对象再次来到.

  2. actions 是部分functions
    表示推行的动作,方法名能够定义为addNews,listNews,delNews那种动词,实际直接重临3个{key:”ADD_NEWS”,”other”:”dfdsfdsf”},除key以外可以定义传递给事件管理供给的参数.

 

四.怎么触发action? 

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

 

伍.组件中的事件最棒写成closure的样式,其余花样可能会不大概找到办法之类的,原理正是此this不是亟需的this导致.

closure 写法: 

 var clickGetUserInfo = (id)=> {

   this.refs.uiEle.text = “23421323” 

 }

 

  render() {

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

 } 

 

Native学习笔记,reactnative React 是运用ES陆,扶助JSX语法, 开荒组件化web或native的工具. 现阶段利用Babel工具转变到ES5代码. 组件通过props属性…

弄精晓了这么些图笔者认为你就能够基本通晓奥迪Q7N了(图片来源于网络,有不当,最终end的时候是component威尔Unmount)

图片 1

redux flow

  1. 开创container, container是三个涵盖了事情逻辑代码,
    担任数据展示过滤和事件绑定的概念. 实际采纳connect自动创制.

redux-redux使用

下边说了provider和connect方法,下边是实用讲授

创建store对象的js文件

下边包车型地铁代码里包含利用当中件redux-thunk,和创办store对象两步,此间有更加多关于中间件的实际情况

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/rootRudcer';
//使用thunk中间件
let createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
//创建store对象,一个APP只有一个store对象
let store = createStoreWithMiddleware(rootReducer);
export default store;

先后的输入文件

import React from 'react';
import { Provider } from 'react-redux';
import store from './store/store';

import App from './containers/app';

export default class Root extends React.Component {
    render() {
        return (
            //将APP的根视图组件包含在provider标签中
            <Provider store = {store} >
                <App />
            </Provider>
        )
    }
}

在容器组件中,将redux和组件关联起来生成七个容器组件,这里是redux与组件关联的地点,大许多童鞋使用redux最吸引的地点估量就在那一块了。

import React from 'react';
import {connect} from 'react-redux';
import Brand from '../Components/Brand';

//BrandContainer容器组件
class BrandContainer extends React.Component {

    render() {
        return (
            //把容器组件的属性传递给UI组件
            <Brand {...this.props} />
        )
    }
}

export default connect((state) => {
    const { BrandReducer } = state;
    return {
        BrandReducer
    }
})(BrandContainer);

那样UI组件Brand中就能够经过品质获取dispatch方法以及管理后的新颖state了

const {dispatch, BrandReducer} = this.props;

上面来解释一下上边包车型客车代码

将近期的BrandContainer组件关乎起来,上边介绍了store中的state对象的结构会是那样的:

{ 
  reducer1: ... 
  reducer2: ... 
}

为此能够由此解构的不二等秘书诀,获取相应模块的state,如上边包车型地铁const {
BrandReducer } = state;

上边那一块代码的职能正是将store中state传递给关系的容器组件中,当store中的state发生变化的时候,connect的率先参数mapStateToProps回调函数就能够被调用,并且将该回调函数的回到值映射成其涉嫌组件的一特性质,那样容器组件的质量就能够产生变化,而UI组件又经过{…this.props}将容器组件的性质传递给了UI组件,所以UI组件的习性也会产生变化,大家知道属性的扭转会变成UI组件重新render。好了,咱们就能够通晓为啥大家在UI组件中dispatch八个action后UI组件能立异了,因为UI组件的性质爆发变化导致奥迪Q三N重绘了UI。

 

品种的引入目录

那种协会适合业务逻辑不太复杂的中型小型型项目,其优点是逻辑模块清晰,缺点是文件目录跨度相当大,对于大型项目提议按类别的作用模块来划分。

图片 2

品类的推荐介绍目录

    包罗三个章程 mapStateToProps 和mapDispatchToProps.
最终一句代码connect(mapStateToProps,mapDispatchProps)(UIComponent),有多个括号,第叁个里就写那四个概念的主意,后边的括号写这么些props要在哪些UI组件类中使用.

store

贰个施用只有3个store,store 便是用来保证应用具备的 state 树
的1个对象。 改换 store 内 state 的绝代门路是对它 dispatch 一个action,它有三个函数

  • getState()
    重回应用当前的 state 树。
  • dispatch(action)
    分发 action。那是触发 state 变化的绝世路子。
    会接纳当前 getState() 的结果和扩散的 action 以共同形式的调用 store
    的 reduce 函数。再次回到值会被看做下三个 state。从前天始发,那就改成了
    getState() 的重返值,同时变化监听器(change listener)会被触发。
  • subscribe(listener)
    当state树爆发变化的时候store会调用subscribe函数,大家得以传二个我们订制的函数作为参数来进展拍卖
    参数:2个函数
    重临值:再次来到三个解绑定函数

    //添加监听
    let unsubscribe = store.subscribe(handleChange)
    //解除监听
    unsubscribe()
    
  • replaceReducer(nextReducer)
    轮换 store 当前用来计量 state 的 reducer。
    这是3个高等 API。唯有在你须要达成代码分隔,而且亟需立刻加载一些
    reducer 的时候才恐怕会用到它。在实现 Redux
    热加载机制的时候也说不定会用到。

  render() {

react native 组件的生命周期

 var clickGetUserInfo = (id)=> {

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect是三个高阶函数,connect()自家会再次回到一个函数变量(倘使名叫func),给那个函数变量传递二个参数func(MainContainer)会变卦1个MainContainer容器组件,形如下边包车型大巴写法:

export default connect((state) => {
    const { Main } = state;
    return {
        Main
    }
})(MainContainer);

参数一:[mapStateToProps(state, [ownProps]): stateProps] (Function)

如若定义该参数,组件将会监听 Redux store 的生成。任几时候,只要 Redux
store 产生转移,mapStateToProps
函数就能够被调用。该回调函数必须回到3个纯对象,这么些目的会与组件的 props
合并。借令你省略了这一个参数,你的零部件将不会监听 Redux
store。假设钦点了该回调函数中的第三个参数
ownProps,则该参数的值为传送到零部件的 props,而且只要组件接收到新的
props,mapStateToProps 也会被调用(比方,当 props
接收到来自父组件3个细小改换,那么你所利用的 ownProps
参数,mapStateToProps 都会被重新计算)。

参数二:[mapDispatchToProps(dispatch, [ownProps]): dispatchProps]
(Object or Function):

假设传递的是1个目的,那么每种定义在该对象的函数都将被用作 Redux
action creator,而且以此指标会与 Redux store
绑定在同步,当中所定义的法门大将作为属性名,合并到零部件的 props
中。假诺传递的是三个函数,该函数将收受二个 dispatch
函数,然后由你来调整哪些回到一个指标,那一个指标通过 dispatch 函数与
action creator 以某种格局绑定在一道(提醒:你或者会用到 Redux
的声援函数
bindActionCreators())。如果你省略这个 mapDispatchToProps 参数,默认情况下,dispatch 会注入到你的组件 props 中。即使钦赐了该回调函数中第一个参数
ownProps,该参数的值为传送到零部件的 props,而且只要组件接收到新
props,mapDispatchToProps 也会被调用。

参数三:[mergeProps(stateProps, dispatchProps, ownProps): props]
(Function)

举例钦赐了这么些参数,mapStateToProps() 与 mapDispatchToProps()
的推行结果和零部件自个儿的 props
将盛传到那么些回调函数中。该回调函数再次回到的对象将用作 props
传递到棉被服装进的零部件中。你或许能够用那几个回调函数,依照组件的 props
来筛选部分的 state 数据,或许把 props 中的有些特定变量与 action
creator 绑定在一起。假设您省略那几个参数,默许景况下回到
Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。
[options] (Object) 要是钦命那个参数,能够定制 connector 的一言一动。

参数四:[options] (Object) 要是钦赐那么些参数,能够定制 connector
的行事。

[pure = true] (Boolean): 假若为 true,connector 将实施shouldComponentUpdate 并且浅相比 mergeProps
的结果,制止不须求的立异,前提是时下组件是贰个“纯”组件,它不借助于于其余的输入或
state 而只凭借于 props 和 Redux store 的 state。私下认可值为 true。
[withRef = false] (Boolean): 假如为 true,connector
会保存二个对被打包组件实例的引用,该引用通过 getWrappedInstance()
方法获得。私下认可值为 false。

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

reducer

它是3个纯函数,须求有雷同的输入(参数)就自然会有同样的输出,它会依附当前的state和action来开始展览逻辑管理回来二个新的state
参数一:当前的state对象
参数二:action对象
再次来到值:爆发多个新的state对象

import { VisibilityFilters } from './actions'
//初始state
const initialState = {
  visibilityFilter: VisibilityFilters.SHOW_ALL,
  todos: []
};

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }
}

注意:reducer函数中自然不要去修改state,而是用Object.assign()函数生成多少个新的state对象,如上所示

combineReducers:随着应用变得复杂,把应用程式的兼具情况都放在多个reducer中拍卖会导致reducer函数相当巨大,由此需求对
reducer 函数 进行拆分,拆分后的每三个子reducer独立担任管理 APP state
的一某些。combineReducers 帮助函数的法力是,把四个分裂子reducer
函数合并成3个末段的根reducer ,最终将根 reducer
作为createStore的参数就可以创设store对象了。合并后的 reducer
能够调用各样子 reducer,并把它们的结果合并成3个 state 对象。state
对象的布局由传入的五个 reducer 的 key 决定。

最后,state 对象的结构会是那样的:

{
  reducer1: ...
  reducer2: ...
}

利用情势如下所示

import { combineReducers } from 'redux';
import Strolling from './strollingReducer';
import Foods from './foodsReducer';
import FoodsList from './foodsListReducer';
import FoodCompare from './foodCompareReducer';
import FoodInfo from './foodInfoReducer';
import Search from './searchReducer';
import User from './userReducer';

export default rootReducer = combineReducers({
    Strolling,
    Foods,
    FoodsList,
    FoodCompare,
    FoodInfo,
    Search,
    User,
})

// export default rootReducer = combineReducers({
//     Strolling:Strolling,
//     Foods:Foods,  
//     FoodsList:FoodsList,
//     FoodCompare:FoodCompare,
//     FoodInfo:FoodInfo,
//     Search:Search,
//     User:User,
// })

// export default function rootReducer(state = {},action){

//     return{
//         Strolling: Strolling(state.Strolling,action),
//         Foods:Foods(state.Foods,action),
//         FoodsList:FoodsList(state.FoodsList,action),
//         FoodCompare:FoodCompare(state.FoodCompare,action),
//         FoodInfo:FoodInfo(state.FoodInfo,action),
//         Search:Search(state.Search,action),
//         User:User(state.User,action)
//     }
// }

//以上三种方式是等价的,key可以设置也可以省略

瞩目:大家不分明非要用combineReducers来组成子reducer,大家能够自定义类似意义的法子来整合,state的布局完全由我们决定。

 } 

react-redux基础

序言已经关系过react-redux的来由,这里在啰嗦一下,react-redux是redux我专门为react
native订制的,这样使用起来更有利,大家只需在我们的零部件中经过品质props获取dispatch方法,就能够直接向store发送三个action,而不须要再赢得store对象,通过store对象的dispatch方法发送。
react-redux有两宝,providerconnect,上边详细介绍一下。

Redux 的八个概念 :

redux概念

有图有本质,先来一张redux数据流图,让您有二个全体的握住

图片 3

redux flow

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图