初探React程式設計邏輯(結合業務需求)

2022-07-11 04:42:12 字數 1127 閱讀 9265

看完react官網的核心知識點,思考如何應用在實際的專案中呢?

第一步:先將ui設計圖劃分成各個react元件,劃分的規則可以根據最小功能單位,或者是根據json資料模型。

第二部:通過react寫靜態頁面結構。

第三步:新增動態互動功能。

總結:子元件的資料來源來自父元件,邊界情況下會出現undefined,所以在渲染子元件的之前需要判斷從父元件傳來的資料是否是有效資料,如果不是直接return null;

本**思路就是頂層的父元件處理所有的業務邏輯。

demo鏈結

class item extends react.component )}}

function

category(props)

return

(

)})}

class table extends react.component

else

}return

(

name

price

) }

}class search extends react.component

}class productfilter extends react.component

this.handlechange = this.handlechange.bind(this

) }

handlechange(e) )

} render()

if(item.name.touppercase().indexof(this.state.value.touppercase()) >= 0)

})}

else

}) }

} else

return

(

this.state.value} isstock= onchange=/>

) }

}reactdom.render(

, document.getelementbyid('root'))

const products =[

, ,

, ,

, ]

React初探之React特性

一 宣告式開發 與原生dom jquery等命令式程式設計不同 不通過指令來控制檢視變化,是面向資料的程式設計 通過控制資料,改動資料的方式控制檢視的變化,dom的部分react會幫你自動構建 二 可以與其他框架並存 reactdom.render document.getelementbyid r...

描述邏輯初探

今天看了一部分描述邏輯,看了好多個說法,裡邊仍然有好多不懂的詞,有種萬事開頭難的感覺。描述邏輯 dl,description logics 一種基於物件的知識表示的形式化工具,吸取了kl one a1 的主要思想,是一階謂詞邏輯的乙個可判定的子集。能夠提供可判定的推理服務,並且具有語義特徵。它被認為...

React初始系列教程 1 React初探

什麼是react?react是facebook公司開發的乙個前端框架,是目前三大前端框架之一 react,angular,vue 元件化開發web與傳統web開發專案,確實絲滑很多,它有三大特點 宣告式 你只需要專注於描述你的ui,react會幫你做底層更新 元件化 所有ui都抽象成元件,大大提高可...