0
点赞
收藏
分享

微信扫一扫

要相信光,写整洁的React代码

言诗把酒 2022-04-29 阅读 87

 

编写更干净,更简单,更易读的 React 代码,是我们的目标。本文由此入手,希望对各位React使用者有用。

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>
  );
}
举报

相关推荐

0 条评论