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的解构机制,因此可以直接使用参数中的某一个属性