zoukankan      html  css  js  c++  java
  • React

    1. https://facebook.github.io/react/docs/multiple-components.html#children关于children的解释

    2. 要区分好component和element以及DOM

    reactdom.render 返回的是component

    this.props.children[1]也是component

    3. reactElement还不是最终的component, 只有经过ReactDOM.render之后才会实例化,返回component

    4.可以通过onchange来捕捉底层UI的事件,在上层处理相关的逻辑,也就是说当两个组件需要通信的时候,交给他们的上级处理

    5. react可以算是一种构建页面的方式他和传统的html ,css ,js得方式有区别,他是把html,js放在一起来构建组件,这样实际上就是让component变成一个活的组件

    6. parent-child通讯是通过props,可以传递函数也可以传递数据,其实prop就相当于构造函数的参数,因为子组件是依靠父组件来实例化的所以,通过父组件传递props也是合理的

    7. child-parent通讯基本上是通过事件, 没有父子关系的组件之间也是通过组件

    8.flux当中提出的controller-view是一个比较好的概念,因为有时候并不一定是因为业务逻辑上的联系才让一个view担负事件派发的任务,只是因为view之间的hierarchy关系才决定让一个view担任controller-view

    "provides the glue code to get the data from the stores and to pass this data down the chain of its descendants"

    有时候按照惯常的逻辑套没有对应概念的时候,试着创造一些概念,先找到一些结构,然后创造一些概念

    9.常用的一些插件assign EventEmitter,其中要使用event emitter,必须先让对象继承自event emitter

    10. 虽然redux提供了container, 但是container中的组件仍然是个问题,实际上,父子组件之间仍然通过props来传递数据和状态, 像我考虑的button的情况,仍然需要通过props 来传递

    10.关于flux的 flux支持store之间的依赖关系,主要是通过设置一个pending和handled来指示是否依赖的store 执行回调结束。flux的dispatcher根据action扫描所有的callbacks,也就是说一个callback并没有指明是哪个store

    11. flux中controller-view也是通过props传递数据给descedants

    12. flux最终的应用形式是,多个store并存,并且在每个store中既保存数据,有执行reducer相关的功能, redux实际上是把二者分开了,当然也不是绝对的分开,store仍然保存有state,但他的reduce logic是通过 reducer注入的

    13.middleware 实际上允许你对dispatch的过程进行扩展和补充,可以根据情况阻断dispatch的过程(不执行next(action)), 如果是函数,那么函数将被执行,并不进行后续的dispatch动作,而且如果拿一个函数来dispatch的话肯定会报错, thunk就是执行一个函数, 并且阻断正常的dispatch过程

    14. ownership 是指组件间的关系,如果一个组件中有子组件,那么这些子组件就属于当前组件

    15. 注意下面一段代码 组件中的rend和ReactDOM.rend是不一样的

    import React from 'react'
    import Home from './home'
    import { Provider } from 'react-redux'
    
    export default class Application extends React.Component {
      componentWillMount() {
        console.log(2342)
        console.log(this.props)
        console.log(this.props.children)
      }
      render () {
        return (
          // As explained above, the Provider must wrap your application's Root component. This way,
          // this component and all of its children (even deeply nested ones) will have access to your
          // Redux store. Of course, to allow Provider to do that, you must give it the store
          // you built previously (via a "store" props).
          <Provider store={ this.props.store }>
          <Home />
          </Provider>
        )
      }

     16. 组件好像不能被嵌套使用, 只能是在ReactDOM.render的时候可以嵌套使用

    17. 在父组件中render函数中可以直接 return this.props.children 这貌似就是Provider的机制, 由此可以想见,并不是不允许嵌套,但是你嵌套必须通过createElement来进行,而且必须指定children选项, 同时如何在render中布置需要组件自己来实现

    18. React是使用className属性来设置元素的样式的class的

    19. 如果createElement中的第一个元素不是字符串,而是ReactClass,这个element中的children不会被渲染出来,反之会被渲染出来

    也可以这么理解,如果一个element的class是基本的不可分的元素类型,像div, input span 这些,而不是React.component的类形,那么这些element的children会被直接渲染出来,反之,如果有children,那么这种parent-chldren关系会被保留,但是不会被渲染出来

    20.组件虽然可以被嵌套但是并不会被直接渲染出来

    21.看了redux的一些东西,其中todomvc中有些组件直接使用了className="todo" 这种用法,难免不会认为,这其实是在切分html,像这样直接使用"todo"并不会带来很好的复用性, 但是从另一个方面来说,react并不是要解决复用性的问题

    22.在处理一些用户交互事件的时候,container组件中,尽量使用抽象层次更低的命名方式, 比如button 可以使用onclick 但是在容器层面或许应该用onAddItem更合适一些

    23. react 有mixin功能,mixin作为一个数组,出现在component中,包含了component 的一些或全部lifecycle函数,这些函数会在相应的lifecycle阶段得到执行,mixin类似于php的traits,可以在一定程度上复用代码

    24. react中事件响应函数中的this并不是组件的this,这一点在使用的时候要注意,可以通过bind(this)的方法来将event handler 绑定到当前组件上

    25. 如果是列表, 在react中使用时要善于使用map函数这样就可以列出多个子component, 然后在render中奖使用this.props.children奖列表项渲染出来

    26. functional component, 由于没有this.props属性,因此会使用函数参数的方式传入props, e.g.

    var Todo = function({p, q}) {

    return <li>(p+q)</li>

    }

    用的时候直接 <TodoList><Todo p={1}, q={2} /></TodoList> 

    参数仍然是一个参数,但是用到了es6的解构机制,因此可以直接使用参数中的某一个属性

    相信世界是平的
    谨记四个字“修身养性”
    大江东去浪淘尽英雄,再牛B的人物最后也是一掊土
    向善不是目的,而是抚慰心灵,更多的感受幸福,感谢别人给你行善的机会
    相信老子的话:万物生于有,有生于无,一切的道理都源于一个无法证明的假设
    我是好是坏就自然而然的摆在那里,并不会因为别人的评价而改变什么,我也不需要别人用一张纸来说明我什么,世间最难得的是自由



    支持大额赞助:
  • 相关阅读:
    字符串与字典常用命令
    Python学习之路:字符串常用操作
    Python学习之路:购物车实例
    面试题2017
    c#语法学习
    结构化设计模式-桥接模式
    结构型设计模式-适配器模式
    .Net Cache
    设计模式的六大原则
    uml类图关系
  • 原文地址:https://www.cnblogs.com/sky-view/p/5786253.html
Copyright © 2011-2022 走看看