这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
本课重点内容
- 响应式编程概念解析
- React基础语法
课堂知识概要
UI设计难点
数据、样式、文档标签杂糅,需要一种割裂的机制让他们互相独立又暗中影响。
- 状态更新,UI不会自动更新,需要手动操作DOM进行更新
- 欠缺基本的代码层面的封装与隔离,代码层面未实现组件化 3.数据之间的依赖关系需要手动进行维护
响应式系统应运而生
- 监听事件
- 消息驱动
组件化
通过组件化可以快速搭建一套编程系统,组件时组建的组合/原子组件。在标签中只需要传入组件即可使用
生命周期
从加载页面到完成页面渲染到页面信息更新,最后页面关闭
REACT提供了一套完整的生命周期,配合这套生命周期,可以很方便的实现在不同生命阶段的方法指令的执行。
REACT写法
基础
元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容。
首行为引入,其下定义了一个页面模板的“变量”,随后在数据(return后面)跟上一个固定不变的模板(元素)
第一个页面
当然,我们也可以把他动起来
这里${count}
就是实现了count的动态绑定,点击按钮后,页面的title就会自增
更新元素
React 元素都是不可变的。当元素被创建之后,你是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法。
REACT特点
- 1.声明式设计
- 2.高效
- 3.灵活
- 4.JSX
- 5.组件
- 6.单向响应的数据流