React.js — 第 05天
IPFS
![](https://assets.matters.news/embed/3c26c279-f994-4a2b-aa63-cb2d36dfd3af.jpeg)
source code 在 | github
渲染Render & 重渲染re-render
- 被呼叫(invoke)的順序依序為
- constructor() -> render() -> componentDidMount
- 當 setState 被呼叫, react 會重渲染一次
![](https://assets.matters.news/embed/fc1e5db6-a8d9-4f12-9cee-0bc4f6f29cb2.jpeg)
input 區域(field) & 搜尋列
焦點條列
- onchange( () => {})
- toLocaleLowerCase()
- filter()
- include()
![](https://assets.matters.news/embed/c0b979ea-4a26-4a7d-9548-d987288e3d53.png)
![](https://assets.matters.news/embed/9a2dadf6-573e-4bd9-b8f7-b0d415bb2a12.jpeg)
![](https://assets.matters.news/embed/b44bc476-c161-4b11-b382-2116a09fbc23.jpeg)
![](https://assets.matters.news/embed/e1f60e75-5afd-4e89-b9d8-80fb20588274.jpeg)
儲存檔案在setState(), 你就可以隨處進入component
![](https://assets.matters.news/embed/4b18dc75-c213-495f-ae46-cca73dc06551.png)
![](https://assets.matters.news/embed/99515bb6-9492-4b9e-bb43-8fe8f4570230.jpeg)
優化Optimizations
- callback
- destructuring
被改變的有...
![](https://assets.matters.news/embed/750cc4e6-74f9-4027-b8a0-77f2af40bab9.png)
![](https://assets.matters.news/embed/b25542bb-86e8-4f0e-a04f-d9f9a3e09c16.png)
我們新增了一個 method — onSearchChange()
- 他只會被呼叫一次
- 不會一在地被重渲染(省效能)
優化 this.state
![](https://assets.matters.news/embed/af71fc42-cf6f-4a6a-b1e6-f0e403f9037e.png)
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/d817bb18-ddf9-48cf-8377-7ad47ca8c94a.jpeg/public)
- 来自作者
- 相关推荐