React 学习笔记(二)

这篇学习主要是围绕Redux展开的..

宇宙惯例..github地址 ⭐⭐⭐

Redux

• Redux和React不要紧 redux也能够用在其余框架里 甚至是原生的js代码也能够用

• Redux的工做流程

• • 先上一图流(字丑莫介意..orz)

    

  • 先作好各类初始化工做 例如安装好Redux , 组件中引入 store 并定义好各个文件的配置 store.getState() 和当前state作绑定 在此不过多赘述了

  • //例如
    // store.index.js中 (store)
    import { createStore } from 'redux'
    import reducer from './reducer'
    const store = createStore(
      reducer
    )
    
    
    //reducer.js中
    
    //默认值
    const defaultState = {
      value: ''
    }
    export default = ( state = defaultState, action )=>{
      return state
    }
    复制代码

  1. 组件中定义一个action的对象
  • 一般为了更便于维护和管理 咱们将要用到的action对象拆分红一个单独的 actionCreators.js文件 里面是一个一个的返回一个对象的函数 返回的对象有如下属性
    • type: 用于以后检测的标识值
    • 要传递更改的数据

  //例如
  //actionCreators.js中定义
  export const getChangeAction = (value) => ({
    type : 'change_value',
    value
  })
  //组件中定义实际要用的action对象
  import { getChangeAction } from './store/actionCreators'
  const action = getChangeAction('testValue) 复制代码

  2. 组件中将定义好的action对象经过 store.dispatch()方法将其派发出去

  //例如
  store.dispatch(action)
  复制代码

  3. reducer.js
     • 在 reducer.js 函数中利用 以前定义好的action.type对传递来的对象进行拦截

     须要注意的是 在进行数据的更改时 reducer里不能进行原始数据的更改 只能将数据进行一次深拷贝 将拷贝下来的数据更改 而后再返回给store 让它对数据进行更新

  //例如
  export default = ( state = defaultState, action )=>{
    if( action.tyle === 'change_value' ){
      const newState = JSON.parse(JSON.stringify(state))
      newState.value = action.value
      return newState
    }
    return state
  }
  复制代码

  4. 到目前为止 数据以及更新完毕 可是视图层尚未更新 因此咱们如今应该去更新视图层 须要在组件里 调用 store.subscribe()这个方法用来监听store里数据的变化同时接受一个函数做为参数, 若是store发生变化就调用传进去的那个函数 因此咱们能够这么写

  //在constructor里
  
  //不要忘记更改this指向
  this.handleStoreChange = this.handleStoreChange.bind(this)
  store.subscribe(this.handleStoreChange)
  
  //handleStoreChange函数
  handleStoreChange(){
    this.setState(store.getState())
  }      
  复制代码

  大功告成

• react-redux

  • react-redux也是用来作数据管理的 只不过是利用了react自己的一些特性, 由于react是单向数据流 因此咱们索性把store集成到全部组件的顶层组件里, 即 顶层的 props里
  • Provider 上作关联 链接 store 内部组件均可以获取store上的内容了

  //入口文件中 (index.js)
  import { Provider } from 'react-redux'
  const App = (
    <Provider store={store} >
      <TodoList/>
    </Provider>
  )
  
  ReactDOM.render(App, document.getElementById('root'));
  
  复制代码

  • 子组件经过 connect 获取
    • connect的第二个括号就是组件自己 第一个口号里须要两个参数 这两个参数都是两个函数 两个映射关系

  //组件中
  //state 是 store里的数据
  // 这个映射的规则就是 把 store里的数据映射到当前的props上
  const mapStoreStateToProps = (storeState) => {
    return {
      inputValue : storeState.inputValue
    }
  }
  
  // store.dispatch 挂到 当前的props上
  const mapStoreDispatchToProps = (storeDispatch) => {
    return {
      changeInputValue(e){
        const action = {
          type : 'change_input_value',
          value: e.target.value
        }
        storeDispatch(action)
      }
    }
  }
  
  export default connect(mapStoreStateToProps , mapStoreDispatchToProps)(TodoList);
  复制代码

• Redux-thunk 中间件

  • 这个中间件使得咱们能够在action里返回一个函数 使得一些异步操做 好比 获取ajax请求能够从组件中抽离出去

// 使用了 redux-thunk 后 action不单单只能是一个对象了 还能够是一个函数
export const getTodo =  () =>{
  // 返回的函数中的第一个参数就是dispatch方法
  return (dispatch) =>{
    $.get('something..').then(res=>{
      console.log(res)
    }).catch(()=>{
      console.log('error');
    })
  }
}
复制代码

因为在 `action` 和 `store`之间是经过 `dispatch`这个方法来进行沟通的 , 因此`redux-thunk`这个中间件实际上就是对`dispatch`的一个封装, 或者一个升级, 最原始的`dispatch`只能返回一个对象 而后再把这个对象返回给`store`, 使用了 `redux-thunk`以后, 咱们能够传给`dispatch`一个函数 , 他就会先自动执行一遍这个函数, 执行完了以后 再将处理后或者执行完函数后的结构返回给store<br/>
一图流, `midWare`就是中间件处理的位置
复制代码

• 还有不少其余中间件就不一一枚举了..

组件分类

• UI组件与容器组件 (傻瓜组件和聪明组件)
• UI组件只负责样式
• 例如 将demo用的 todolist拆分

const TodoListUI = (props) =>{
  return (
    <div style={{ margin: " 0 auto ", width: "400px", paddingTop: "150px" }}>
      <div style={{ margin: "10px" }}>
        <Input
          placeholder="todo"
          value={props.inputValue}
          style={{ width: "300px", marginRight: "10px" }}
          onChange={props.handleInputChange}
        />
        <Button onClick={props.handleBtnClick} type="primary">提交</Button>
      </div>
      <List
        style={{ margin: "10px", width: "300px" }}
        bordered
        dataSource={props.list}
        header='todo'
        renderItem={(item,index )=> <List.Item onClick={()=>{props.handleItemClick(index)}}>{item}</List.Item>}
      />
    </div>
  )
}
更多详情见 github.. todolist2.0里面的代码
复制代码

• 容器组件负责逻辑 功能实现 与UI组件之间经过 props链接

• 无状态组件

  • 只有render函数的组件
  • 优点是性能比较高 由于它就是一个函数 不须要有相关的生命周期初始化过程