5个技巧助你编写更好的React代码

在本文中，我想分享几个技巧，这些技巧将改善你的React代码。

1. 解构 props

在 JS 中解构对象(尤其是 props)可以大大减少代码中的重复。看下面的例子：

 
 
 
 
  
  
  
  //Parent Component 
  
  
  
  import React from 'react'; 
  
  
  
   
  
  
  
  import CoffeeCard from './CoffeeCard'; 
  
  
  
   
  
  
  
  const CafeMenu = () => { 
  
  
  
      const coffeeList = [ 
  
  
  
          { 
  
  
  
              id: '0', 
  
  
  
              name: 'Espresso', 
  
  
  
              price: '2.00', 
  
  
  
              size: '16' 
  
  
  
          }, 
  
  
  
          { 
  
  
  
              id: '1', 
  
  
  
              name: 'Cappuccino', 
  
  
  
              price: '3.50', 
  
  
  
              size: '24' 
  
  
  
          }, 
  
  
  
          { 
  
  
  
              id: '2', 
  
  
  
              name: 'Caffee Latte', 
  
  
  
              price: '2.70', 
  
  
  
              size: '12' 
  
  
  
          } 
  
  
  
      ]; 
  
  
  
   
  
  
  
      return coffeeList.map(item => ( 
  
  
  
           
  
  
  
      )); 
  
  
  
  }; 
  
  
  
   
  
  
  
  export default CafeMenu;

CafeMenu 组件用于存储可用饮料的列表，现在我们想要创建另一个可以显示一种饮料的组件。如果不对 props 进行解构，我们的代码将像下面这样:

 
 
 
 
  
  
  
  //Child Component 
  
  
  
  import React from 'react'; 
  
  
  
   
  
  
  
  const CoffeeCard = props => { 
  
  
  
      return ( 
  
  
  
           
  
  
  
              {props.coffee.name}
 
  
  
  
              Price: {props.coffee.price}$
 
  
  
  
              Size: {props.coffee.size} oz

);

};

export default CoffeeCard;

如你所见，它看起来并不好，每次我们需要获取某个属性时，都要重复 props.coffee，幸运的是，我们可以通过解构来简化它。

 
 
 
 
  
  
  
  //Child Component (after destructuring props) 
  
  
  
  import React from 'react'; 
  
  
  
   
  
  
  
  const CoffeeCard = props => { 
  
  
  
      const { name, price, size } = props.coffee; 
  
  
  
      return ( 
  
  
  
           
  
  
  
              {name}
 
  
  
  
              Price: {price}$
 
  
  
  
              Size: {size} oz

如果我们想将大量参数传递给子组件，我们还可以直接在构造函数(或函数组件的参数)中解构 props。比如：

//Parent Component
import React from 'react';
import ContactInfo from './ContactInfo';
const UserProfile = () => {
const name = 'John Locke';
const email = 'john@locke.com';
const phone = '01632 960668';
return ;
};
export default UserProfile;
//Child Component
import React from 'react';
const ContactInfo = ({ name, email, phone }) => {
return (
{name}
E-mail: {email}
Phone: {phone}

import { Auth } from 'aws-amplify';
import React from 'react';
import SidebarNavigation from './components/SidebarNavigation';
import { EuiPage, EuiPageBody } from '@elastic/eui';
import { keyCodes } from '@elastic/eui/lib/services';
import './index.css'
import HeaderNavigation from './components/HeaderNavigation';
import Routes from './Routes';

import React from 'react';
import { Auth } from 'aws-amplify';
import { EuiPage, EuiPageBody } from '@elastic/eui';
import { keyCodes } from '@elastic/eui/lib/services';
import HeaderNavigation from './components/HeaderNavigation';
import SidebarNavigation from './components/SidebarNavigation';
import Routes from './Routes';
import './index.css'

import React from 'react';
import Columns from './Columns';
const Table = () => {
return (
);
};
export default Table;

import React from 'react';
const Columns = () => {
return (
Hello
World
);
};
export default Columns;

import React, { Fragment } from 'react';
const Columns = () => {
return (
Hello
World
);
};
export default Columns;

import React from 'react';
const Columns = () => {
return (
<>
Hello
World
);
};
export default Columns;

import React, { useState, useEffect } from 'react';
const BookList = () => {
const [books, setBooks] = useState([]);
const [isLoading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch('api/books')
.then(res => res.json())
.then(books => {
setBooks(books);
setLoading(false);
});
}, []);
const renderLoading = () => {
return
Loading...
;
};
const renderBooks = () => {
return (
- {books.map(book => (
- {book.name}
- ))}
);
};
return <>{isLoading ? renderLoading() : renderBooks()};
};
export default BookList;

import React from 'react';
const BookList = ({ books, isLoading }) => {
const renderLoading = () => {
return
Loading...
;
};
const renderBooks = () => {
return (
- {books.map(book => (
- {book.name}
- ))}
);
};
return <>{isLoading ? renderLoading() : renderBooks()};
};
export default BookList;
import React, { useState, useEffect } from 'react';
import BookList from './BookList';
const BookListContainer = () => {
const [books, setBooks] = useState([]);
const [isLoading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch('/api/books')
.then(res => res.json())
.then(books => {
setBooks(books);
setLoading(false);
});
}, []);
return ;
};
export default BookListContainer;

import React from 'react';
import styled from 'styled-components';
const Grid = styled.div`
display: flex;
`;
const Col = styled.div`
display: flex;
flex-direction: column;
`;
const MySCButton = styled.button`
background: ${props => (props.primary ? props.mainColor : 'white')};
color: ${props => (props.primary ? 'white' : props.mainColor)};
display: block;
font-size: 1em;
margin: 1em;
padding: 0.5em 1em;
border: 2px solid ${props => props.mainColor};
border-radius: 15px;
`;
function App() {
return (
My 1st Button
My 2st Button
My 3st Button
My 4st Button
My 5st Button
My 6st Button
);
}
export default App;