Re: [請益] 新手上路 - 第一次做網頁+使用React js

看板Web_Design作者davidsky (Alive)時間9年前 (2016/08/16 14:18)推噓1(1推 0噓 2→)

留言3則, 1人參與討論串2/2 (看更多)

只回答前端部分 ※ 引述《silentcrane (寂靜之鶴)》之銘言： : 目前是碰到的一些問題: : 1. React是把整個網頁分隔成各種component(組件?原件?)，我蠻喜歡這種設計的 : 但是如果後面有改動或是增加新東西，其他的架構會不會被影響很大? : 例如說原本是兩個組件,後來被合成一個... : (雖然想想，好像不管哪個Frameworks都會被影響 XDDD) (1) 實務上很少會把兩個組件合成一個（除非你在講 component composition)，多半是把一個組件拆成兩個 (2) 程式有改動會不會有巨大影響要看組件之間的耦合性強不強，以 React 來說高耦合性的部分易發生在 parent <-> child 之間的溝通改善方法諸如：使用第三方 observer pattern module 來降低父子之間關聯，使用類似 Redux 以及傳遞 props 到底層的方式。但個人覺得你現在階段不用擔心這些。 : 2. 如果我有一堆圖案(像是球隊隊徽)，我想在點其中一個時候 : 讓其他的消失+顯現出一些訊息。 : 這樣的做法應該是把每個隊徽都設成自己獨立的組件嗎? : 感覺是這樣才能夠去獨立操控每一個的狀態? : (React的基本寫法是任何我想要單獨處理的都要是一個獨立組件? @@) 要不要把單一種類型的項目獨立成一個組件沒有標準答案，如果操作複雜度很高的話會傾向獨立。以你的需求來說"看起來"可以用單一元件達成： ```js import React from 'react'; export default class IconList extends React.Component { constructor(props) { super(props); this.state = { icons: [], active: -1 // index of active icon } } render() { var dom = this.state.icons.map(function(icon, index) { var cls = ''; if (this.state.active >= 0) { cls = this.state.active === index ? 'active' : 'hidden'; } return <div className={"icon " + cls}>{icon}</div> }); return <div>{dom}</div> } } // 再來透過使用者 click 去改變 this.state.active 即可 // 但是當操作越來越複雜，越來越針對單一 item 特化時就可以獨立出 <Icon /> ``` : 5. 目前看一些React解說，很多都有提到boilerplate 和 webpack : boilerplate = 樣板? : webpack = ...?? OTL : 想開始寫code之前是不是得先搞懂這兩個是甚麼呢? OAO 兩者都非必要 (1) 新手從 boliderplate 開始反而會不知道什麼是必要的，以及為什麼要有這些東西 (2) webpack 是協助打包以及處理依賴相關, 做 preprocessing/postprocessing ... 的 build tool, 如果沒有要用 ES6 寫 React 可以先不學但如果要學 ES6 的話搭配 babel + react 事半功倍。 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.225.46.60 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1471328309.A.E25.html ※ 編輯: davidsky (36.225.46.60), 08/16/2016 14:19:42