上次说到了为什么需要React以及React产生的历史,提到了一个应用场景:苹果购物网站iPhone手机销售页面的展示,个人思考React是在当今C端产品逐渐浏览器化的大趋势下,一个UI编程的必然产物,它提高了UI编程的效率,将原先与Java、C等语言的模式转变为基于事件响应的编程模式,大大的提高了效率。
DOM和课件中展示的“树”结构不一样(组件划分)
Summary:
1.组件是组件的组合/原子组件
2.组件内拥有状态,外部不可见
3.父组件可将状态传入组件内部(接口化的概念)
新问题:当前价格到底应该属于哪个组件?顶栏?型号选择?都不对,因为父组件可以控制子组件,所以当然价格只能放在Root结点,however,这是一个很危险的事情,不太好。(React状态管理库,第五节) 大多数状态下,组件都有独立性
当前价格如何改变?触发当前价格改变的事件不是Root结点,而是子结点,将onChangeValue()向下传递(JavaScript中,函数是一等公民)。
思考: 1.React是单向数据流,还是双向数据流?(单项数据流,永远是父组件给子组件传递东西,但并不是表示子组件不能给父组件传递状态) 2.如何解决状态不合理上升的问题?(动态管理库) 3.组件的状态改变后,如何更新DOM?
React的设计思路——组件化
组件设计
1.组件声明了状态和UI的映射。 2.组件有Props/State两种状态。 3.“组件”可由其他组件拼装而成。
React的设计思路——生命周期
mounting、updating、unmounting
挂载、卸载和状态改变的时候(三个时段)