react两个单独数组嵌套一块_初学React，需要了解哪些知识点？

作者：__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>

特点

1. 声明式编程中无需使用变量，也不用在执行过程中更新变量的值，简单来说就是「避免了创建和修改状态」
2. 声明式编程中只需要知道自己要做什么，无需列出实现效果的所有步骤
3. 代码简洁、易读、可维护性高

2. React 元素

React 使用 「元素」 这种特殊对象来控制 UI 流程，这些 「不可变对象」比 「组件」和 「组件实例」简单的多，而且其中只包含了展示界面所必须的信息：

{
     
  type: Title,
  props: {
     
    color: 'red',
    children: {
     
      type: 'h1',
      props: {
     
        children: 'Hello, H1!'
      } 
   }
  }
}

• type  属性告诉 React 如何处理 「元素」 本身
  • 「字符串类型」，代表 「DOM 节点」
  • 「函数类型」，代表 「React 组件」
• children 属性是可选的，为 「元素」的直接后代

当 type