1. 概述
脱离初级前端一段时间后会发现,写样式的时间越来越少,处理数据的时间越来越多。处理数据的过程也就是实现业务逻辑的过程,这在项目中无疑是最重要的。
所以学习前端框架,了解完基本语法后,接下来就要学习其如何进行数据传递。
Angular 设计之初的一大亮点就是实现了数据的双向绑定,使用 Vue 一段时间后发现,所谓数据的双向绑定,组件内部唯一的应用场景就是 form 表单(input,textarea,select, radio),而这种场景下的数据双向绑定,即便框架内部没有实现,自己实现起来也非常简单。明白这一点后感觉之前认为 React 没有实现数据双向绑定很 low 的想法很幼稚。
对于 React 的数据传递,涉及两方面的内容:
- 组件内部的数据传递,典型的应用场景包括如何实现 form 表单双向数据绑定、如何绑定事件;
- 组件间的数据传递。 包括父组件往子组件传递数据、子组件往父组件传递数据以及兄弟组件之间传递数据。
本文先讨论组件内部的数据传递。
2. 组件内部数据传递
React 组件内部通信主要分为两部分:数据展示与事件处理。
2.1 数据展示
组件内部数据的展示和更新都是通过 state 来实现的,如果要使用 state 必须使用 ES6 的 class 定义组件。数据更新在双向数据绑定部分探讨,这部分仅讨论展示初始化数据。
如果你熟悉 Vue,React 的 state 对象相当于 Vue 的 data 对象
下面是一个纯展示数据的示例:
class App extends Component { constructor(props) { super(props); // 初始化 state this.state = { inputValue: "test", }; } render() { // 注意,在 react 中,DOM 元素是对象,所以使用‘()'包住 return ( <div className="App"> <p>{this.state.inputValue}</p> </div> ); } }
在通过 class 定义的 React 组件中,除了生命周期钩子函数, constructor() 和 render() 着两个方法也是自动执行的,先执行 constructor() ,执行 constructor() 的同时也是再为 render() 渲染 DOM 做数据准备。
实际上 constructor() 函数是组件生命周期中调用的第一个函数。
2.2 事件
2.2.1 与 DOM 中事件的异同
在 React 中处理事件和在 DOM 中处理事件类似,有两点不同:
- React 中通过驼峰命名法命名事件,而不是全是小写字母;
- 在 JSX 中直接传递函数作为事件处理程序,而不是字符串。
第 2 点不同有坑,后面细说
举个例子,HTML中的事件:
内容版权声明:除非注明,否则皆为本站原创文章。