JSX 速记

传递布尔值prop：在一个组件上提供的任何prop的默认值都是true：

<Navbar showTitle />

传递字符串prop：值放在双引号中，可不用大括号

<Navbar title="My App" />

非相关代码组件化

通常我们需要.map()遍历一个数据，这部分应该抽成子组件，传递data作为props，同时，可以将我们拥有的每个组件放在一个单独的文件中：

// src/App.js

export default function App() {
  const data = [
    {
      id: 1,
      title: ""
    },
    {
      id: 2,
      title: ""
    }
  ];
 return (
    <main>
      <Navbar title="My Special App" />
      <List data={data}/>
    </main>
  );
}

// src/NavBar.js
function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

// src/List.js
function List({ data }) {
  return (
    <ul>
      {props.data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

?共享功能 Hooks 化

在专门的 "钩子 "文件夹中创建了需要共享的功能钩子，我们就可以在任何我们喜欢的组件中重复使用它：

// src/hooks/useFetchData.js
import React from 'react';

export default function useFetchData() {
  const [data, setData] = React.useState([]);  	
    
  React.useEffect(() => {
    fetch('someUrl')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return data;
}

// src/components/List.js
import useFetchData from '../hooks/useFetchData.js';

export default function List() {
  const data = useFetchData()

  return (
    <ul>
      {data.map((item) => (
        <li key={data.id}>{data.title}</li>
      ))}
    </ul>
  );
}

JSX中删除JavaScript，CSS

我们需要将JSX的内联函数提取出来，变成一个单独的处理程序，我们可以给它一个合适的名字，使得组件更易读。此外，对于内联样式，移到一个CSS样式表中，我们可以把它导入我们喜欢的任何组件或者将它们组织成对象：


import useFetchData from '../hooks/useFetchData.js';

export default function List() {
  const data = useFetchData()
  
  function handleItemClick(event) {
    console.log(event.target, 'clicked!');   
  }

  return (
    <ul>
      {data.map((post) => (
        <li onClick={handleItemClick} key={data.id}>{data.title}</li>
      ))}
    </ul>
  );
}

// src/components/NavBar.js
function Navbar({ title }) {
  const styles = {
    div: { marginTop: "20px" },
    h1: { fontWeight: "bold" }
  };

  return (
    <div style={styles.div}>
      <h1 style={styles.h1}>{title}</h1>
    </div>
  );
}

合理使用React context

比如，我们想要在多个层级组件中重复使用用户数据，所需要做的就是把我们的整个应用包裹在一个提供者组件中。接下来，我们可以在值prop上传递用户数据，并在useContext钩子的帮助下，在我们的各个组件中消费该上下文：

// src/App.js
import React from "react";

const UserContext = React.createContext();

export default function App() {
  const user = { name: "" };

  return (
    <UserContext.Provider value={user}>
      <main>
        <Navbar title="My Special App" />
        <List />
      </main>
    </UserContext.Provider>
  );
}

// src/components/Navbar.js
function Navbar({ title }) {
  const user = React.useContext(UserContext);

  return (
    <div>
      <h1>{title}</h1>
      {user && <a href="/logout">Logout</a>}
    </div>
  );
}

// src/components/List.js
function List() {
  const Data = useFetchData();
  const user = React.useContext(UserContext);

  if (user) return null;

  return (
    <ul>
      {data.map((item) => (
        <li key={data.id}>{data.title}</li>
      ))}
    </ul>
  );
}