重构

src/App.js 中所有的组件都是用 function 来声明的，我们可以使用 ES6 中新增的箭头函数来简化它们。

举例：

function () { ... }
const () => { ... }

const item => { ... }
const (item) => { ... }
const (item, index) => { ... }

声明箭头函数时，如果只有一个参数，可以把括号去掉；但多个参数时，括号是必须的（为了避免麻烦，我们参数统一使用括号）。

实际应用：

const App = () => {
  return (
    <div>
      ...
    </div>
  );
};

const List = () => {
  return (
    <ul>
      {list.map((item) => {
        return (
          <li key={item.objectID}>
           	...
          </li>
        );
      })}
    </ul>
  );
};

可以看到 map() 也和其他函数一样可以使用箭头函数简化。

如果一个箭头函数没有执行任何任务，只返回信息，我们也可以去掉 {} 以及 return，函数会自己附上一个隐式的返回声明：

const App = () => (
  <div>
    ...
  </div>
);

const List = () => (
  <ul>
    {list.map((item) => (
      <li key={item.objectID}>
        ...
      </li>
    ))}
  </ul>
);

可以看到 JSX 简洁了许多，但你要记住：这是可选的步骤，并不是必须的。

且函数签名和返回语句之间需要引入业务逻辑时，必须要加上 {} 以及 return。

React DOM

现在我们已经大概了解了组件的定义，让我们来看看 App 组件的实例化。

打开 src/index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

React.StrictMode 是一个用来突出显示应用程序中潜在问题的工具，不用管它。

重点只有这一句：

ReactDOM.render(<App />, document.getElementById("root"));

我们用 ReactDOM.render() 函数让 JSX 替换掉 HTML 中的一个 DOM 节点，也就是将 React 集成到了 HTML中。

该方法需要传入两个参数：

首先是要渲染的 JSX，你可以传入一个简单的 JSX，也可以直接传入一个组件的实例，如 <App />；
第二个参数指定了 React 应用在何处显示你的 HTML，你可以在 public/index.html 文件中找到这个 id="root" 的元素。

专栏

因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。

在更新完后会整合为一整篇，感谢关注和点赞！

2022 React 最速上手指南（四）—— 重构 & React DOM

重构

React DOM

专栏