Các phương pháp hay nhất trong ReactJS

Thứ Năm, 23/03/2023

Tram Ho

Nhập theo cấu trúc

các thành phần
hình ảnh
bảng định kiểu
móc
tính thiết thực

<span class="token keyword">import</span> <span class="token punctuation">{</span> Routes <span class="token punctuation">,</span> Route <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react-router-dom"</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createSlice <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@reduxjs/toolkit"</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Menu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@headlessui/react"</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">"./Home"</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> logo <span class="token keyword">from</span> <span class="token string">"./logo.svg"</span> <span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">"./App.css"</span> <span class="token punctuation">;</span>

import { Routes , Route } from "react-router-dom" ;

import { createSlice } from "@reduxjs/toolkit" ;

import { Menu } from "@headlessui/react" ;

import Home from "./Home" ;

import logo from "./logo.svg" ;

import "./App.css" ;

Tuân thủ quy định đặt tên

PascalCase chủ yếu dành cho thành phần
camelCase chủ yếu đặt cho hàm, hook, biến, mảng

 <span class="token keyword">const</span> <span class="token punctuation">[</span> firstName <span class="token punctuation">,</span> setFirstName <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token string">"Ihechikara"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 <span class="token keyword">const</span> studentList <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
 <span class="token keyword">const</span> studentObject <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span>
 <span class="token keyword">const</span> <span class="token function-variable function">getStudent</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>

const [ firstName , setFirstName ] = useState ( "Ihechikara" ) ;

const studentList = [ ] ;

const studentObject = { } ;

const getStudent = ( ) => { }

Gom group state

thầy vì

  <span class="token keyword">const</span> <span class="token punctuation">[</span> username <span class="token punctuation">,</span> setusername <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span> password <span class="token punctuation">,</span> setpassword <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token string">''</span> <span class="token punctuation">)</span>

const [ username , setusername ] = useState ( '' )

const [ password , setpassword ] = useState ( '' )

Nên sử dụng

  <span class="token keyword">const</span> <span class="token punctuation">[</span> user <span class="token punctuation">,</span> setuser <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span>

const [ user , setuser ] = useState ( { } )

đạo cụ hủy diệt

<span class="token keyword">const</span> <span class="token punctuation">[</span> user <span class="token punctuation">,</span> setuser <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span>

Làm rõ các biến

  <span class="token comment">// Declare them as capitalized named constants.</span>
  <span class="token keyword">const</span> <span class="token constant">MILLISECONDS_PER_HOUR</span> <span class="token operator">=</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">1000</span> <span class="token punctuation">;</span> <span class="token comment">// 36000000</span>
  
  <span class="token function">setTimeout</span> <span class="token punctuation">(</span> restart <span class="token punctuation">,</span> <span class="token constant">MILLISECONDS_PER_HOUR</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

// Declare them as capitalized named constants.

const MILLISECONDS_PER_HOUR = 60 * 60 * 1000 ; // 36000000

setTimeout ( restart , MILLISECONDS_PER_HOUR ) ;

Không thể lặp lại tên biến không cần thiết

<span class="token comment">// old</span>
type User <span class="token operator">=</span> <span class="token punctuation">{</span>
  userName <span class="token operator">:</span> string <span class="token punctuation">;</span>
  userLastName <span class="token operator">:</span> string <span class="token punctuation">;</span>
  userAge <span class="token operator">:</span> number <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">print</span> <span class="token punctuation">(</span> <span class="token parameter">user <span class="token operator">:</span> User</span> <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
  console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> userName <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> userLastName <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> (</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> userAge <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">)</span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">//new</span>
type User <span class="token operator">=</span> <span class="token punctuation">{</span>
  name <span class="token operator">:</span> string <span class="token punctuation">;</span>
  lastName <span class="token operator">:</span> string <span class="token punctuation">;</span>
  age <span class="token operator">:</span> number <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">print</span> <span class="token punctuation">(</span> <span class="token parameter">user <span class="token operator">:</span> User</span> <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>
  console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> lastName <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> (</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> age <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">)</span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

// old

type User = {

userName : string ;

userLastName : string ;

userAge : number ;

}

function print ( user : User ) : void {

console . log ( ` ${ user . userName } ${ user . userLastName } ( ${ user . userAge } ) ` ) ;

}

//new

type User = {

name : string ;

lastName : string ;

age : number ;

}

console . log ( ` ${ user . name } ${ user . lastName } ( ${ user . age } ) ` ) ;

}

Tạo đối tượng tham số khi có 2 tham số trở lên

<span class="token comment">//old </span>
type UserStatus <span class="token operator">=</span> <span class="token string">'online'</span> <span class="token operator">|</span> <span class="token string">'offline'</span> <span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">createUser</span> <span class="token punctuation">(</span> <span class="token parameter">name <span class="token operator">:</span> string <span class="token punctuation">,</span> lastName <span class="token operator">:</span> string <span class="token punctuation">,</span> age <span class="token operator">:</span> number <span class="token punctuation">,</span> status <span class="token operator">:</span> UserStatus</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token function">createUser</span> <span class="token punctuation">(</span> <span class="token string">'Gapur'</span> <span class="token punctuation">,</span> <span class="token string">'Kassym'</span> <span class="token punctuation">,</span> <span class="token number">29</span> <span class="token punctuation">,</span> <span class="token string">'online'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

<span class="token comment">//new</span>
type UserStatus <span class="token operator">=</span> <span class="token string">'online'</span> <span class="token operator">|</span> <span class="token string">'offline'</span> <span class="token punctuation">;</span>
type User <span class="token operator">=</span> <span class="token punctuation">{</span> name <span class="token operator">:</span> string <span class="token punctuation">,</span> lastName <span class="token operator">:</span> string <span class="token punctuation">,</span> age <span class="token operator">:</span> number <span class="token punctuation">,</span> status <span class="token operator">:</span> UserStatus <span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">createUser</span> <span class="token punctuation">(</span> <span class="token parameter">user <span class="token operator">:</span> User</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token function">createUser</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
  name <span class="token operator">:</span> <span class="token string">'Gapur'</span> <span class="token punctuation">,</span>
  lastName <span class="token operator">:</span> <span class="token string">'Kassym'</span> <span class="token punctuation">,</span>
  age <span class="token operator">:</span> <span class="token number">29</span> <span class="token punctuation">,</span>
  status <span class="token operator">:</span> <span class="token string">'online'</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>

//old

type UserStatus = 'online' | 'offline' ;

function createUser ( name : string , lastName : string , age : number , status : UserStatus ) {

// ...

}

createUser ( 'Gapur' , 'Kassym' , 29 , 'online' ) ;

//new

type User = { name : string , lastName : string , age : number , status : UserStatus } ;

// ...

}

createUser ( {

name : 'Gapur' ,

lastName : 'Kassym' ,

age : 29 ,

status : 'online'

} ) ;

Thành phần quán tính nhất

<span class="token comment">// old</span>
<span class="token keyword">const</span> <span class="token function-variable function">renderHeader</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> span</span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">User:</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> span</span> <span class="token punctuation">&gt;</span></span>
      <span class="token punctuation">{</span> user <span class="token punctuation">.</span> name <span class="token operator">&amp;&amp;</span> user <span class="token punctuation">.</span> lastName <span class="token operator">&amp;&amp;</span> <span class="token function">renderUserInfo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">renderUserInfo</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> span</span> <span class="token punctuation">&gt;</span></span> <span class="token punctuation">{</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> lastName <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> span</span> <span class="token punctuation">&gt;</span></span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

<span class="token comment">//new</span>
<span class="token keyword">const</span> <span class="token function-variable function">renderHeader</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> div</span> <span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> span</span> <span class="token punctuation">&gt;</span></span> <span class="token plain-text">User:</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> span</span> <span class="token punctuation">&gt;</span></span>
      <span class="token punctuation">{</span> <span class="token function">renderUserInfo</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> div</span> <span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token function-variable function">renderUserInfo</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span> user <span class="token punctuation">.</span> name <span class="token operator">&amp;&amp;</span> user <span class="token punctuation">.</span> lastName <span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> span</span> <span class="token punctuation">&gt;</span></span> <span class="token punctuation">{</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> user <span class="token punctuation">.</span> lastName <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> span</span> <span class="token punctuation">&gt;</span></span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token keyword">null</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">;</span>

// old

const renderHeader = ( ) => {

return (

< div >

< span > User: </ span >

{ user . name && user . lastName && renderUserInfo ( ) }

</ div >

) ;

}

const renderUserInfo = ( ) => {

return < span > { ` ${ user . name } ${ user . lastName } ` } </ span > ;

} ;

//new

return (

< div >

{ renderUserInfo ( ) }

</ div >

) ;

}

if ( user . name && user . lastName ) {

}

return null ;

} ;

Create a variable to set default value

<span class="token comment">//old</span>
<span class="token keyword">function</span> <span class="token function">createUser</span> <span class="token punctuation">(</span> <span class="token parameter">user <span class="token operator">:</span> User</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  user <span class="token punctuation">.</span> name <span class="token operator">=</span> user <span class="token punctuation">.</span> name <span class="token operator">||</span> <span class="token string">'User'</span> <span class="token punctuation">;</span>
  user <span class="token punctuation">.</span> lastName <span class="token operator">=</span> user <span class="token punctuation">.</span> lastName <span class="token operator">||</span> <span class="token string">''</span> <span class="token punctuation">;</span>
  user <span class="token punctuation">.</span> age <span class="token operator">=</span> user <span class="token punctuation">.</span> age <span class="token operator">||</span> <span class="token number">18</span> <span class="token punctuation">;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

<span class="token comment">//new</span>
<span class="token keyword">function</span> <span class="token function">createUser</span> <span class="token punctuation">(</span> <span class="token parameter">user <span class="token operator">:</span> User</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> userWithDefaultValues <span class="token operator">=</span> <span class="token punctuation">{</span>
    name <span class="token operator">:</span> <span class="token string">'User'</span> <span class="token punctuation">,</span>
    lastName <span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">,</span>
    age <span class="token operator">:</span> <span class="token number">18</span> <span class="token punctuation">,</span>
    <span class="token operator">...</span> user <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span>

//old

user . name = user . name || 'User' ;

user . lastName = user . lastName || '' ;

user . age = user . age || 18 ;

// ...

}

//new

const userWithDefaultValues = {

name : 'User' ,

lastName : '' ,

age : 18 ,

... user ,

} ;

// ...

}

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

Các phương pháp hay nhất trong ReactJS

Nhập theo cấu trúc

Tuân thủ quy định đặt tên

Gom group state

đạo cụ hủy diệt

Làm rõ các biến

Không thể lặp lại tên biến không cần thiết

Tạo đối tượng tham số khi có 2 tham số trở lên

Thành phần quán tính nhất

Create a variable to set default value

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript