前言

React是三大框架之一，关于Vue与React的争论也一直都在，不过目前市场环境下我的看法是鱼与熊掌兼得，本节就来学习一下React中的组件。

组件

组件是界面的一部分，该部分有着自己逻辑外观。Vue和React组件含义基本上是一样的，就是组件写法不同，React是函数式编程，组件有一个返回值，返回的是带有标签的js函数，也就是jsx。

function OneComponent(){
  return (
    <span>这是一个组件</span>
  )
}

React中自定义组件名称必须以大写字母开头，而标签必须是小写。

导入导出

组件的导出有两种：

• 默认导出，export default 组件名
• 具名导出，export 函数名

对应的导入也有两种

• 默认导入，import 组件名
• 具名导出 import {组件名}

在一个文件中只能有一个默认导出，但是可以有多个具名导出，就是采用es6中的导入导出方式，这点跟Vue是一样的。

jsx语法

React用的jsx语法，用法跟js很像，但是还是有所区别，下面我们来简单介绍下jsx的一些语法与技巧。

样式

react中组件添加样式跟添加class一样，不过名称要换成className

<span className="text"></span>

以上创建组件添加样式的语法叫做JSX，react一般就用JSX开发，近两年ts快成为必备技能了，对应的react也支持tsx。JSX的标签必须要闭合，并且要有一个根元素，这点跟vue2一样。

渲染

vue与react都使用了虚拟dom，变量数据在页面都能响应式的展示。react中展示变量数据用花括号括起来，花括号的作用就是将变量展示成js的。

return{
  <span>{name}</span>
}

标签属性如果是变量同样也是用花括号，比如className。

return{
  <span className={name}></span>
}

需要注意的是行内样式style，style的语法就是style={}。

return{
 <span style={color:'red'}></span>
}

如果想要用变量也要再嵌套一层{}，看起来就是双花括号。

return{
 <span style={{color:colorName}}></span>
}

总之在花括号只要是js表达式就能运行，函数、变量都可以。花括号也不是任何地方都能用得到，从上面例子我们可以总结出来，花括号能在jsx标签文本使用或者属性=后面。而css变量或对象就需要用双大括号。渲染中有两个比较特殊的渲染：

• 条件渲染，react中条件渲染有以下方式实现：
  1. if语句，使用if是将变量写好判断，然后再将变量写入jsx中。
  2. 三目运算，简单的逻辑判断我们直接在jsx中使用三目。
  3. 逻辑运算，&&，||等逻辑运算也能进行判断，然后返回我们想要的结果。注意逻辑运算返回的是某一项而不是布尔值。数字不要放到左边，如果为0页面上会渲染出来0，而不是不渲染。
• 列表渲染，列表也是常见的数据结构，Recat列表渲染用的是js循环方法。之所以用循环是因为当list数据量大时我们不可能一个个写出，循环是很好的渲染方式。常用的渲染方法是map。注意在渲染时需要添加key，而且这个key最好是唯一标识，这跟diff算法相关。

总结

整体来说React跟Vue有相似的地方，如果有Vue的基础，上手React会非常快，如果你还是只会Vue的话，建议还是学习一下React。