yiyun's Blog
·
freeCodeCamp | Front End Development Libraries | 笔记
💡
原文中文，约60200字，阅读约需144分钟。
📝
内容提要
本文介绍了使用Sass变量、嵌套CSS、Mixins、@if和@else、@for、@each、@while、Partials、@extend、React渲染方法、高级JavaScript、&&、三元表达式、唯一的key属性、Array.map()、Array.filter()、Object.assign、删除数组项、展开运算符、常量Action类型、store侦听器、中间件、Redux计数器、不可变state、Provider、state映射到props等内容。
🎯
关键要点
- 使用 Sass 变量存储数据
- 嵌套 CSS 使样式更具层次感
- 使用 Mixins 创建可重用的 CSS
- 使用 @if 和 @else 为样式添加逻辑
- 使用 @for 创建 Sass 循环
- 使用 @each 映射列表中的项
- 应用样式直到条件满足 @while
- 使用 Partials 将样式拆分为更小的块
- 将一组 CSS 样式扩展 (@extend) 到另一个元素
- React 组件必须闭合
- 使用默认 props 值
- 通过 propTypes 限制 props
- 使用 this.props 访问 props
- 创建有状态组件
- 使用 setState 更新 state
- 可控的 input 和 Form
- 将状态作为 props 传递给子组件
- 传递回调作为 props
- 添加事件侦听器
- 使用 Array.map() 动态渲染元素
- 为同级元素提供唯一的 key 属性
- 使用 Array.filter() 动态过滤数组
- 创建 Redux Store
- 定义 Redux Action 和 Action 创建者
- 处理 Store 中的 Action
- 使用中间件处理异步 Action
- 不可变 state
- 使用 Object.assign 复制一个对象
- 将 Redux 连接到 React
- 将状态逻辑提取到 Redux
- 使用 Provider 将 Redux 连接到 React
➡️
