作者:__mxin
分享前端知识和实用小技巧,感谢阅读~~
github: https://github.com/mxin-d
掘金:https://juejin.im/user/3790771824108808
文章同步更新,欢迎「关注」
前言
刚刚接触 React,对于框架的特性、常用的编程风格以及插件都很陌生,希望下面的内容可以帮到初学的小伙伴
1. 声明式编程
首先要理解声明式编程的含义,以及它和命令式编程的区别所在,先来看一个简单的函数实现
传入一个包含大写字符串的数组,返回一个全小写字符串的数组
toLowerCase(['FOO', 'BAR']) // ['foo', 'bar']
- 「命令式函数」
const toLowerCase = input => {
// 保存结果
const output = []
// 遍历所有元素,并将小写元素 push 到结果数组中
for (let i = 0; i output.push(input[i].toLowerCase())
}
// 返回结果
return output
}
- 「声明式函数」
const toLowerCase = input => input.map( value => value.toLowerCase())
实际应用
使用 「React组件」 来对比一下 「命令式」和 「声明式」的区别,这样比较容易理解
展示一个带有标记的地图,使用 Google Maps SDK
- 「命令式」
// 创建地图
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng,
})
// 创建标记
const marker = new google.maps.Marker({
position: myLatLng,
title: 'Hello World!',
})
// 在地图中添加标记
marker.setMap(map)
- 「React 组件」
4} center={myLatLng}><Marker position={myLatLng} title="Hello world!" />Gmaps>
特点
- 声明式编程中无需使用变量,也不用在执行过程中更新变量的值,简单来说就是「避免了创建和修改状态」
- 声明式编程中只需要知道自己要做什么,无需列出实现效果的所有步骤
- 代码简洁、易读、可维护性高
2. React 元素
React 使用 「元素」 这种特殊对象来控制 UI 流程,这些 「不可变对象」比 「组件」和 「组件实例」简单的多,而且其中只包含了展示界面所必须的信息:
{
type: Title,
props: {
color: 'red',
children: {
type: 'h1',
props: {
children: 'Hello, H1!'
}
}
}
}
type
属性告诉 React 如何处理 「元素」 本身- 「字符串类型」,代表 「DOM 节点」
- 「函数类型」,代表 「React 组件」
children
属性是可选的,为 「元素」的直接后代
当 type