這次帶給大家React進行元件開發步驟詳解，React進行元件開發的注意事項有哪些，下面就是實戰案例，一起來看一下。
目標
了解元件設計幾個參考點:
#1. 元件設計
1.1 按下有無狀態管理 可以分為有狀態元件 無狀態元件
圖解說明
1.1.1 有狀態元件, 用React.Component 形式創建
#推薦分類
推薦廣告
程式碼範例class MyComponent extends Component {
constructor(props) {
super(props)
this.state = {
推荐分类列表:[],
推荐广告列表:[],
推荐商品列表:[]
}
}
render() {
return ...首页>
}
}登入後複製
1.1.2 無狀態元件，以函數的方式展現多，在開發中盡量用這種形式
這種元件自己不維護狀態，資料靠屬性傳入
程式碼範例
function Element(props) {
let val = props.val
return <p>组件 - ...</p>
}登入後複製
1.2 按元件
功能
分割為容器元件 操作元件
展示元件
圖解說明
1.2.1 容器元件
- 屬性
方式傳下去，然後子元件用
事件 方式把資料傳回
像上面這個商品搜尋業務
狀態有: 搜尋關鍵字、排序、商品清單
程式碼範例
class Container extends Component {
constructor(props) {
super(props)
this.state = {
搜索关键字: '手机壳',
排序: '综合',
商品列表: []
}
}
render() {
return (
<p>
</p>
)
}
}登入後複製
1.2.1 操作元件
處理互動操作，例如搜尋方塊、
用戶註冊登入、購物車、文章編輯、拍圖、上傳
圖解中的搜尋框，接收
屬性 關鍵字 產生的新資料事件
方式返回容器元件
程式碼範例
function SearchInput(props) {
let 关键字 = props.关键字
return (
<p>
<input>
</p>
)
}登入後複製
1.2.1 展示元件#這種就更純粹了，只接收屬性
數據，用來展示
圖解中的商品列表，接收
屬性 商品列表
程式碼範例
function SearchInput(props) {
let 商品列表 = props.商品列表
return (
<p>
{商品列表.map((item, index) => (
))}
</p>
)
}登入後複製
其中
商品資訊
元件也是一個
展示元件
, 盡可能的把元件拆分
2. 元件間通訊
其實就是在一個容器元件上，擺放了一個
控制元件
和一個展示元件
圖解說明
我們動手寫一下
第一步: 寫輸入元件
程式碼
function InputView(props) {
return (
<p>
<input>
</p>
)
}登入後複製
處理###onKeyDown### 訊息，傳回父容器######第二步驟: 編寫清單展示元件######程式碼###
function ListView(props) {
return (
<ol>
{props.datas &&
props.datas.map((item, index) => (
<li>{item}</li>
))}
</ol>
)
}登入後複製
######map### 循環列印資料清單######第三個步驟: 容器元件綁定狀態、事件## ####程式碼###
class ContainerView extends Component {
constructor(props) {
super(props)
this.state = {list: []}
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
if (e.keyCode === 13) {
const value = e.target.value
e.target.value = ''
this.setState((state, props) => {
let list = state.list
list.push(value)
return {list}
})
}
}
render() {
return (
<p>
<inputview></inputview>
<listview></listview>
</p>
)
}
}登入後複製
e.keyCode === 13 表示一直监控到输入回车，开始更新状态
https://codepen.io/ducafecat/...
3. React進行組件開發步驟詳解
这个例子加入React進行組件開發步驟詳解功能，这在表单操作中用的很频繁
图解说明
还是用代码说明
3.1 第一步：输入组件
代码
class InputView extends Component {
constructor(props) {
super(props)
this.form = props.form // 父容器 state.form
this.sync = props.sync // 父容器 sync
this.handleChange = this.handleChange.bind(this)
}
handleChange(e) {
let name = e.target.attributes.name.value
let value = e.target.value
this.sync({name, value})
}
render() {
return (
登入後複製
)
}
}
{
input: '',
textarea: '',
select: ''
}登入後複製
按控件名称 key / val 结构
handleChange(e) {
let name = e.target.attributes.name.value
let value = e.target.value
this.sync({name, value})
}登入後複製
可以发现回传的是 {控件名, 控件值}，这里是简写（键、值 名相同时可以写一个），完整格式是
{
name: name,
value: value
}登入後複製
3.2 第二步：展示组件
代码
function ListView(props) {
let form = props.form
let list = []
for (let key in form) {
list.push({
key,
value: form[key]
})
}
return (
登入後複製
{list &&
list.map((item, index) => (
-
{item.key} - {item.value}
))}
)
}
这里做展示就简单了，接收到属性 form 后，格式化成数组 list ，然后 map 打印
3.3 第三步：容器组件
代码
class ContainerView extends Component {
constructor(props) {
super(props)
this.state = {form: {input: '', textarea: '', select: ''}}
this.handleSync = this.handleSync.bind(this)
}
handleSync(item) {
this.setState((prevState, props) => {
let form = prevState.form
form[item.name] = item.value
return {form}
})
}
render() {
return (
<p>
<inputview></inputview>
<listview></listview>
</p>
)
}
}登入後複製
handleSync 中 form[item.name] = item.value 动态更新 key / value 达到更新 state
https://codepen.io/ducafecat/...
建议
通过学习本章后，大家写具体功能代码前，可以先做下 UI组件架构设计
这个没有那么神秘，就是描述下有哪些组件、他们之间如何组装
如果大脑中抽象的不清楚，可以借助原型工具设计，自己能看懂就行，否则边写边设计容易乱掉
设计完成后，过几遍没啥问题了，再编写具体功能
代码
参考文
Lifting State Up
Thinking in React
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
JS中的JSON和Math使用案例分析
JS中使用接口步骤详解
以上是React進行組件開發步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
