![](https://img-blog.csdnimg.cn/20200530170808252.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React入门之路
记录学习react的历程
明致成
人生海海,山山而川,不过尔尔!
展开
-
1、React生命周期钩子
通过webpack+react+stylus+koa学习react框架,实现的旅 游大数据大屏展示https://gitee.com/bidding-M/react-test原创 2020-05-30 17:10:14 · 135 阅读 · 0 评论 -
2、react事件相关
react事件相关 1、React 里面绑定事件的方式和在 HTML 中绑定事件类似 注意要显式调用 bind(this) 将事件函数上下文绑定要组件实例上 <p onClick={this.handleClick.bind(this)}></p> 2、“合成事件”和“原生事件” React 实现了一个“合成事件”层,保证了和 W3C 标准保持一致,消除了 IE 与 W3C 标准实现之间的兼容问题。 事件委托: “合成事件”会以事件委托的方式绑定到组件最上层,并且在组原创 2020-05-30 17:11:07 · 144 阅读 · 0 评论 -
3、react DOM操作
DOM操作 1、findDOMNode() 当组件加载到页面上之后(mounted),可以通过 react-dom 提供的 findDOMNode() 方法拿到组件对应的 DOM 元素。 findDOMNode() 不能用在无状态组件上。 import { findDOMNode } from 'react-dom'; 2、Refs 另外一种方式就是通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称,然后通过 this.refs.name 来访问对应的 DOM 元素。 因为无原创 2020-05-30 17:11:55 · 246 阅读 · 0 评论 -
4、react 组件通信
组件间通信 1、父子组件通信 就是通过 props 属性传递,在父组件给子组件设置 props,然后子组件就可以通过 props 访问到父组件的数据/方法,这样就搭建起了父子组件间通信的桥梁。 父组件访问子组件用 refs 2、非父子组件通信 使用全局事件 Pub/Sub 模式,在 componentDidMount 里面订阅事件,在 componentWillUnmount 里面取消订阅,当收到事件触发的时候调用 setState 更新 UI。 这种模式在复杂的系统里面可能会变得难以维护。 一般原创 2020-05-30 17:12:36 · 161 阅读 · 0 评论 -
5、Data Flow
Data Flow Data Flow 只是一种应用架构的方式,比如数据如何存放,如何更改数据,如何通知数据更改等等,所以它不是 React 提供的额外的什么新功能,可以看成是使用 React 构建大型应用的一种最佳实践。 两种最主要的实现: 官方的Flux 更优雅的Redux ...原创 2020-05-30 17:14:07 · 271 阅读 · 0 评论 -
6、Flux
Flux 一个 Flux 应用主要包含四个部分: dispatcher:处理动作分发,维护 Store 之间的依赖关系 stores:数据和逻辑部分 views:React 组件,这一层可以看作 controller-views,作为视图同时响应用户交互 actions:提供给 dispatcher ,传递数据给 store 1、单向数据流 Flux 的核心:单向数据流 Action -> Dispatcher -> Store -> View View 会通过用户交互触发 Acti原创 2020-05-30 17:14:30 · 220 阅读 · 0 评论 -
7、redux 的基础概念
redux 的基础概念 1、三个基本原则 整个应用只有唯一一个可信数据源,也就是只有一个 Store State 只能通过触发 Action 来更改 State 的更改必须写成纯函数,也就是每次更改总是返回一个新的 State,在 Redux 里这种函数称为 Reducer 2、Actions 一个单纯的包含 { type, payload } 的对象,type 是一个常量用来标示动作类型,payload 是这个动作携带的数据。 Action 需要通过 store.dispatch() 方法来发送。原创 2020-05-30 17:15:10 · 172 阅读 · 0 评论 -
8、Redux-进化的flux
Redux-进化的flux 也是 Flux 里面“单向数据流”的思想,只是它充分利用函数式的特性,Redux 是超越 Flux 的一次进化。 1、进化 Flux flux 的 action creator export function addTodo(text) { AppDispatcher.dispatch({ type: ActionTypes.ADD_TODO, text: text }); } redux 的 action creator export function原创 2020-05-30 17:15:56 · 177 阅读 · 0 评论