10 mẹo giúp bạn học reactjs dễ dàng hơn
Cảnh báo Spam: Bài đăng này chưa sẵn sàng để xuất bản. Tác giả có thể đã vô tình công khai nó trong quá trình viết. Do đó, bạn nên suy nghĩ trước khi đọc bài bài này.
Không lòng vòng mình sẽ đi qua từng trick
- Class Components VS Function Components Học reactjs bạn sẽ biết tới 2 khái niệm đó là Class Components và Function Component .
- Class Components:
- là một class ES6, nó sẽ là một component khi nó "kế thừa" React component. có thể nhận props (trong hàm khởi tạo) nếu cần. có thể maintain data của nó với state phải có 1 method render() trả về 1 React element (JSX), or null
class MyComponent mở rộng Thành phần { render () { return
Xin chào {this.props.text} </ p> } }
- Function Components
- 1 functional component là một hàm Javascript (hoặc ES6) trả về 1 phần tử/1 element React. Theo official docs của React, hàm dưới đây là một component React hợp lệ:
- Vì vậy mình có thể định nghĩa 1 component như 1 JS Function:
const MyComponent = (props) => <p> Xin chào {props.text} </ p>
Các Class components là những class ES6. Chúng phức tạp hơn functional components ở chỗ nó còn có: phương thức khởi tạo, life-cycle, hàm render() và quản lý state (data).
Nhưng trong phát triển phản ứng, nhiều nhà phát triển quên mất cách chúng ta có thể tạo ra một thành phần chỉ bằng cách sử dụng function, đó có thể là một function với một tham số - props.
Nhưng cách sử dụng của Class Component và Function Component này trông giống nhau!
<MyComponent text = "Thế giới" />Vậy mình sẽ rút ra được gì ở đây ? Nên sử dụng class component hay function component ??? Thì nhìn vào chúng ta sẽ thấy function component đơn giản là một function js và trả về 1 DOM Reactjs. Chính vì thế nó sẽ dễ dàng sự dụng hơn class, và chắc chắn function component sẽ tối ưu hơn do sử dụng ít bộ nhớ do không phải kế thừa từ component nào.Function component tạo ra một DOM ảo mà không cần các đạo cụ và phương thức không cần thiết để quản lý chúng dễ dàng hơn, nhanh hơn và dự trữ ít bộ nhớ hơn. Vì vậy, nếu chúng ta nghĩ về tối ưu hóa, chúng ta cần nghĩ về sự khác biệt này. Được rồi - vậy khi nào chúng ta có thể sử dụng Thành phần lớp và khi Thành phần chức năng? Các quy tắc rất dễ dàng - KHI BẠN CẦN SỬ DỤNG MỌI THÀNH PHẦN CHỨC NĂNG CHỨC NĂNG KHÔNG CÓ - SỬ DỤNG THÀNH PHẦN LỚP! Khá dễ? Vâng! Bắt đầu viết cho bạn các thành phần từ bản phác thảo như thành phần chức năng. Khi bạn thấy rằng bạn cần sử dụng một cái gì đó như trạng thái hoặc phát hiện một số thay đổi trong thành phần của bạn - như componentWillMount()v.v. Sau đó, bạn có thể chuyển đổi nó thành Thành phần lớp. Khi bạn nghĩ về loại sử dụng thành phần này, bạn sẽ trở thành một PRO! 2. Các câu lệnh của If If trong mẫu thành phần Nhìn bên dưới Bạn có biết điều gì sai với phương thức if statement này không? {a> b? <MyComponent />: null} Nếu điều kiện không nhất quán, React sẽ hiển thị null. Hmm, không sao đâu - Tôi không thấy nên không có vấn đề gì. Điều này nullvẫn tồn tại trong DOM của bạn, vì vậy nếu bạn muốn đưa tất cả trẻ em từ danh sách của bạn hoặc gọi cho trẻ em thứ n thì null này sẽ được tính !!! Giải pháp? {a> b && <MyComponent />} Thật dễ dàng, thật thanh lịch. Như một ngươi chuyên nghiệp! 3. Ràng buộc chức năng TÔI YÊU ES6! TÔI YÊU CHỨC NĂNG MROWI TÊN !!! Nhưng nếu bạn hiểu cách chúng thực sự hoạt động, thì việc sử dụng chúng trong phản ứng rất dễ dàng. Thông tin thêm về họ ( Tại đây ). Trong hàm mũi tên rất ngắn có được một phạm vi từ cha mẹ trực tiếp của chúng, đã có khai báo . Tại sao tôi nói về tham chiếu đó để ràng buộc chức năng? Bởi vì có một mẹo rất dễ dàng để làm cho bạn mã sạch hơn. Hàm tiêu chuẩn liên kết với sự kiện trông như thế: class MyComponent mở rộng Thành phần { constructor (props) { super (props) this .clickHander = this.clickHander.bind (this) } clickHander (e) { e.preventDefault (); cảnh báo ('Xin chào' + this.props.text) } render () { return <môngom onClick = {this.clickHander}> </ button> } } Chúng tôi khai báo clickHandlerhàm, nhưng bối cảnh chính của chúng ( this) là nút mà chúng tôi nhấp vào. Vì vậy, nếu chúng ta muốn liên kết thisnhư là lớp của chúng ta, thì, chúng ta cần liên kết nó vào constructor. Tôi có thể làm cho nó dễ dàng hơn? TẤT NHIÊN!!! Bởi chức năng mũi tên bởi vì nó nhận được một phạm vi từ cha mẹ trực tiếp của họ, rằng đã có khai báo (sao chép từ phía trên). class MyComponent mở rộng Thành phần { clickHander = (e) => { alert ('Hello' + this.props.text) } render () { return <môngom onClick = {this.clickHander}> </ button> } } Dễ dàng hơn, nhanh hơn và trông giống như một PRO !!!! ** QUAN TRỌNG ** Nếu bạn muốn sử dụng cấu trúc này - hãy nhớ rằng ngay bây giờ nó đang trong thử nghiệm, vì vậy chúng tôi cần dịch nó bằng babel bằng cách sử dụng transform-class-property, đó là tiêu chuẩn trong create-react-app. Tham khảo tại đây 4. Đạo cụ và trạng thái ngắn hơn Một thứ khác mà chúng ta có thể sử dụng từ ES6, nhưng chúng ta đã quên - phá hủy. Trong nhiều đánh giá mã chúng ta có thể thấy rằng các đối tượng khổng lồ bị phá hủy cho các bộ phận nhỏ. ... var width = this.props.myObject. thong, height = this.props.myObject.height, color = this.props.myObject.color; ... Đó là quá dài, và giải pháp không linh hoạt. Có một cách rất dễ dàng để phá hủy thông minh hơn. ... var {width, height, color} = this.props.myObject; ... Khá dễ dàng khi chúng ta muốn có biến có cùng tên như khóa của đối tượng. Làm thế nào chúng ta có thể sử dụng nó trong phản ứng? nhập React, {Thành phần} từ 'Reac' class MyComponent mở rộng Thành phần { render () { let {name, age} = this.props return <p> Tên tôi là {name}. Tôi {tuổi} tuổi. </ P> } } hoặc với thành phần chức năng nhập React từ 'Reac' const MyComponent = ( {name, age} ) => <p> Tên tôi là {name} . Tôi {tuổi} tuổi. </ P> Một vi dụ khac? Khi bạn sử dụng cấu trúc lớn của đạo cụ hoặc trạng thái. nhập React, {Thành phần} từ 'Reac' class MyComponent mở rộng Thành phần { state = { team: [ { person: { basicInfo: { name: 'Michal', age: 27 } } } ] } render () { let {name, age} = this.props.team [0] .person.basicInfo
return <p> Tên tôi là {name} . Tôi {tuổi} tuổi. </ P>
} } Dễ dàng? Dễ dàng! Và trông giống như một PRO;) 5. Kiểu tách Tư vấn rất nhanh - PHONG CÁCH RIÊNG !!! : D Nhưng chúng ta có hai tình huống: Chúng tôi có thể sử dụng các kiểu bên ngoài từ các tệp (.css, .scss) Chúng tôi sử dụng một số thành phần sử dụng kiểu xây dựng của chúng, nhưng chúng chỉ sử dụng nội tuyến material-ui Tình huống đầu tiên khá dễ dàng, hãy đặt vào webpack sass và bộ nạp kiểu, và đó là tất cả! Nhưng tình huống thứ hai hơi khó khăn và tôi muốn chỉ cho bạn một vài giải pháp:
1. Const với phong cách
nhập React, {Thành phần} từ 'Reac' const style = { đoạn: { 'fontSize': '10px', 'color': '# ff0000' } } class MyComponent mở rộng Thành phần { render () { return (
2. Mô-đun CSS
Thật tốt khi tải CSS như đối tượng và tham chiếu trong mã của bạn đến lớp tồn tại trong tệp css của bạn.
nhập React, {Thành phần} từ 'phản ứng'
nhập các lớp từ './style.css'
class MyComponent mở rộng Thành phần {
render () {
return (
<div>
<p className = { class.par Đoạn}> Đây là văn bản đầu tiên của tôi </ p>
<p> Đây là văn bản thứ hai của tôi </ p>
</ div>
)
}
}
Video nhanh cách chuẩn bị webpack cho CSS
Và hãy nhớ - nếu bạn có thể tách các tệp của mình và giúp dễ dàng chỉnh sửa, thì bạn sẽ làm việc như một PRO!
6. Môi trường phụ thuộc
Chúng tôi thích tạo nguyên mẫu một cái gì đó, nhưng chúng tôi không muốn đặt một cái gì đó cho phiên bản sản xuất. Làm cách nào để ẩn các đoạn của bạn hoặc có sẵn một cái gì đó chỉ dành cho nhà phát triển hoặc trên chế độ phát triển?
Sử dụng MÔI TRƯỜNG MÔI TRƯỜNG - biến phụ mà bạn có thể chỉ định trong khi bắt đầu hoặc xây dựng dự án của mình. Khi bạn đang bắt đầu bất kỳ hành động nào từ thiết bị đầu cuối, sau đó bạn có thể đặt các biến bổ sung được đẩy vào ứng dụng theo nút process.envsau đó bạn có thể đẩy bất cứ thứ gì.
Ví dụ. MY_VARIABLE="Hello World!" npm run start
Sau đó trong process.env.MY_VARIABLEchúng ta sẽ thấy giá trị của chúng tôi.
Nếu bạn đang sử dụng create-react-appthì bạn đã có biến được xây dựng như NODE_ENVchế độ trả về của bản dựng của bạn development, productionhoặc test. Và đó là tất cả để sử dụng cơ bản.
const isDebug = process.env.NODE_ENV === 'phát triển'
Làm thế nào để sử dụng nó trong thực tế?
nhập React, {Thành phần} từ 'Reac'
const isDebug = process.env.NODE_ENV === 'phát triển'
class MyComponent mở rộng Thành phần {
render () {
return (
<div>
<p> Đây là văn bản công khai của tôi </ p>
{isDebug && <p> Đây là văn bản phát triển của tôi </ p>}
</ div>
)
}
}
Tôi không chắc chắn nó giống như một PRO nhưng bạn có thể vượt qua ENV VARIABLE một số thông tin nhạy cảm với môi trường như url gốc API hoặc địa chỉ dự án của bạn, v.v.
** Quan trọng **
Đừng quên rằng nếu bất cứ ai muốn giải mã mã nguồn của bạn, thì anh ta có thể thấy bạn phụ thuộc.
7. Ghi nhớ về khả năng kiểm tra thành phần
Điều đó khá dễ hiểu - nếu bạn nghĩ về việc thử nghiệm ứng dụng của bạn, thì có lẽ bạn muốn sử dụng Jest để thử nghiệm. Nhưng bạn cần nhớ rằng nếu bạn kết nối các thành phần của mình với một số phụ trợ như Apollo (cho GraphQL) hoặc máy trạng thái như Redux hoặc HOC khác thì bạn cần nhớ rằng tiện ích mở rộng này sẽ không khả dụng trong thử nghiệm thành phần đơn giản. Và đó là chuyện bình thường. Khi bạn muốn kiểm tra thành phần SINGLE của mình, thì bạn chỉ kiểm tra chức năng đó - kiểm tra xem các đạo cụ và hành động đầu vào trên thành phần có hoạt động đúng không.
Vậy làm thế nào để chuẩn bị các thành phần của bạn để thử nghiệm?
Nếu bạn không có HOC, hãy xuất bình thường:
nhập React, {Thành phần} từ 'Reac'
class MyComponent mở rộng Thành phần {
render () {
let {name, age} = this.props
return <p> Tên tôi là {name}. Tôi {tuổi} tuổi. </ P>
}
}
xuất mặc định MyComponent
nhưng nếu bạn muốn sử dụng bất kỳ HOC nào, hãy sử dụng mẫu này:
nhập React, {Thành phần} từ 'Reac'
lớp xuất khẩu MyComponent mở rộng Thành phần {
render () {
let {name, age} = this.props
return <p> Tên tôi là {name}. Tôi {tuổi} tuổi. </ P>
}
}
xuất mặc định myHocFunction (MyComponent)
Tại sao? Bởi vì khi bạn muốn nhập vào tài liệu khác, bạn thành phần với HOC thì bạn sử dụng:
nhập MyComponent từ './components/MyComponent'
nhưng trong các bài kiểm tra bạn có thể sử dụng
nhập {MyComponent} từ './components/MyComponent'
Mã đơn giản, giải pháp đơn giản nhưng nhiều khả năng sử dụng - vì tất nhiên chúng tôi là một PRO;)
8. Sử dụng người trợ giúp
Rất, rất đơn giản và điều quan trọng. Đôi khi bạn sử dụng các chức năng tương tự hoặc bạn có cùng quy tắc trong nhiều thành phần. Nó là không cần thiết để sao chép mã của bạn. Chỉ cần tách chức năng trợ giúp sang tệp khác và đặt nó trong thư mục trợ giúp toàn cầu:
công
src
người giúp đỡ
globals.js
module
Người dùng
người giúp đỡ
index.js
UserList.js
User.js
app.js
** Quan trọng **
Nếu bạn nhân đôi mã của mình - bạn nên cải thiện nó!
Tách tập tin là cách tốt nhất để trở nên giống như một PRO!
9. Phản ứng mảnh vỡ
Bạn đã chuẩn bị bố cục tốt nhất của mình, đánh dấu HTML là tốt nhất, mọi suy nghĩ đều trông khá đẹp ARHHHH AMAZING, chỉ cần thực hiện phản ứng tiêu đề. Trông có vẻ hoàn hảo, jumbotron, một cách tuyệt vời, tôi đã có một phần không được bao bọc Phản ứng của SHIT!
Đó là một vấn đề khi bạn muốn tạo một thành phần không có trình bao bọc. Trong thời gian dài, chúng ta cần phải bọc mọi thứ:
class MyComponent mở rộng Thành phần {
render () {
return (
<div>
<p> Đây là văn bản đầu tiên của tôi </ p>
<p> Đây là văn bản thứ hai của tôi </ p>
</ div>
)
}
}
bởi vì phản ứng không cho phép chúng tôi đặt nó một mình. tại sao - không được sử dụng nếu mỗi phần tử bên trong có khóa uniq riêng, nó có thể nhận ra phần nào của DOM là thành phần của mình.
NHƯNG React đã thêm một tính năng mới gọi là Frag React Fragments, cho phép bạn xây dựng thành phần nhóm nhiều thành phần mà không cần bọc trong DOM. Nó hoạt động giống như gói div nhưng thay vào đó div chúng tôi sử dụng <React.Fragment></React.Fragment>câu lệnh hoặc phiên bản ngắn<></>
Ví dụ.
class MyComponent mở rộng Thành phần {
render () {
return (
< React.Fragment >
<p> Đây là văn bản đầu tiên của tôi </ p>
<p> Đây là văn bản thứ hai của tôi </ p>
</ React.Fragment >
)
}
}
hoặc là
class MyComponent mở rộng Thành phần {
render () {
return (
<>
<p> Đây là văn bản đầu tiên của tôi </ p>
<p> Đây là văn bản thứ hai của tôi </ p>
</>
)
}
}
Thật tuyệt vời - bạn giống như một PRO đọc toàn bộ bài viết từ tài liệu
10. Các PRO sử dụng loại Prop và Đạo cụ mặc định
Nếu bạn là PRO bạn nghĩ về những thứ mà bạn cần. Tại sao tôi nên sử dụng PropTypes?
Trong quá trình phát triển, bạn có thể chắc chắn rằng các thành phần khác của bạn chuyển giá trị đúng cho chúng. Nếu bạn muốn sử dụng chuỗi, thì trong đạo cụ của bạn phải là một chuỗi, vì ex. bạn có thể làm bên trong những thứ cụ thể thành phần cho chuỗi. Thêm defaultPropsnếu propType của bạn không được yêu cầu bảo vệ bạn rằng bạn / hoặc trường đại học dự án của bạn quên thêm một số prop vào thành phần.
nhập React, {Thành phần} từ 'phản ứng'
nhập PropTypes từ 'prop-type'
class MyComponent mở rộng Thành phần {
render () {
return <p> Xin chào {this.props.text .toLocaleUpperCase () } </ p>
}
}
MyComponent.propTypes = {
text: PropTypes.opes
}
MyComponent.defaultProps = {
text: 'World'
}
Và bạn muốn biết thêm về PropTypes - Tài liệu đầy đủ
TÓM LƯỢC
Như bạn có thể thấy, 10 mẹo đó rất dễ thực hiện đối với mã của bạn. Đọc nó một lần nữa, thêm phản ứng nếu bạn thích nó và viết bình luận nếu có gì đó không rõ ràng hoặc nếu bạn muốn đọc về một cái gì đó cụ thể hơn! Chúc may mắn!
All rights reserved
