版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/teamlet/article/details/78796959
前面说的是通过继承React.Component创建React组件。
还可以通过无状态的功能函数构造React组件。
举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Components</title>
</head>
<body>
<!-- Target Container -->
<div id="react-container"></div>
<!-- React Library & React DOM-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script>
const foodList = ({items}) =>
React.createElement(
"ul",
{className: "food-list"},
items.map((item, i) =>
React.createElement("li", { key: i }, item)
)
)
const items = [
"1 apple",
"1 banana",
"2 oranges",
"2 tomatos"
]
ReactDOM.render(
React.createElement(foodList, {items}, null),
document.getElementById('react-container')
)
</script>
</body>
</html>声明一个无状态功能函数 foodList：其中
items是传入的形参参数；
React.createElement是函数体和返回值
const foodList = ({items}) =>
React.createElement(
"ul",
{className: "food-list"},
items.map((item, i) =>
React.createElement("li", { key: i }, item)
)
)另外一个匿名函数是items.map（）里面的作为参数传入的函数
item是 items数组里的每一个值，i是items数组的index, item = items[i]
items.map((item, i) =>
React.createElement("li", { key: i }, item)
)这句的作用是把 items里面的每个值，转换成一个React Element。
每个item都构造成对应html的<li>,包含一个key的属性以及item的内容。
ReactDOM.render(
React.createElement(foodList, {items}, null),
document.getElementById('react-container')
)在ReactDom渲染的时候，以前面创建的无状态功能函数foodList构造React.createElement，并传入实参{items}。