我曾經(jīng)一度的質(zhì)疑催式，為什么要使用框架，使用框架（react）不僅增加了我的前端學(xué)習(xí)曲線的斜率避归，而且在使用過程中荣月，并沒有覺得方便，反而是各種束縛各種坑梳毙。直到我拿到了別人的react代碼才大概懂了哺窄，框架的存在就是以犧牲簡潔性和靈活性來獲得更好的維護性和規(guī)范性。
組件化
組件化是react的重要特性之一账锹，這里把我的總結(jié)分享給大家萌业。
- 什么是組件化？
我們都知道人體是由細(xì)胞構(gòu)成的奸柬，這個概念你自己想想就好生年，如果醫(yī)生也這么定義的話，這個世界上估計就沒有醫(yī)生了（因為太復(fù)雜了）廓奕。醫(yī)學(xué)上將人體的不同部分的細(xì)胞分門別類抱婉，有肌肉組織档叔，脂肪組織等等，然后根據(jù)不同的區(qū)塊來確認(rèn)病原以及治療方法蒸绩。
前端代碼也是一樣衙四，把代碼放在一起不僅不好維護，甚至連寫的人都會因為不停地翻上翻下而筋疲力竭侵贵。因此組件化極為必要届搁。
- react中的組件——Component
react允許自己定義組件，這個得益于JSX窍育，組件可以自己加鍵值對卡睦，然后通過this.props進行調(diào)用。這么講太生硬漱抓，來點生動的表锻。
- 交互代碼如下：
App.jsx
import React, { Component } from 'react';
import './App.css';
import TodoInput from './TodoInput';
import TodoItem from './TodoItem';
import 'normalize.css';
import './reset.css';
class App extends Component{
constructor(props){
super(props)
this.state = {
newTodo: '啊，藏得整么深還是被發(fā)現(xiàn)了啊啊啊啊',
todoList: []
}
}
render(){
return (
<div className='App'>
<TodoInput onSubmit={this.state.newTodo}
onChange={this.changeTitle.bind(this)}/>
</div>
)
}
export default App;
TodoList.jsx
import React, { Component } from 'react';
export default class TodoInput extends Component{
render(){
return <input type='text' value={this.props.content}
onKeyPress={this.submit.bind(this)}
onChange={this.changeTitle.bind(this)}/>
//onKeyPress是input標(biāo)簽中的必須的內(nèi)置的
}
submit(e){
if(e.key === 'Enter'){
this.props.onSubmit(e);
}
}
changeTitle(e){
this.props.onChange(e)
}
}
解說流程：
- App對象繼承自react的component父對象（這是規(guī)定乞娄，別問我為什么）瞬逊；
- constructor()函數(shù)初始化props和state；
- render()函數(shù)開始進行渲染：
- 渲染是一個輸入框組件仪或，這個組件是我自己定義的哈确镊，HTML中可沒有的。
- 這個輸入框的實體在TodoList.jsx文件中范删，跟App的前期流程相同蕾域，他的render()函數(shù)返回真正的HTML標(biāo)簽：
<input>。 - 標(biāo)簽中有三個鍵值對到旦，我以第二個為例旨巷。當(dāng)輸入框被被敲回車時，執(zhí)行submit()函數(shù)：當(dāng)回車按下就執(zhí)行
this.props.onSubmit添忘。由此就像回城跳轉(zhuǎn)一樣跳到了App.jsx文件中采呐，this.props就相當(dāng)于<TodoList>中包含鍵值對的對象夭谤，則this.props.onSubmit就是執(zhí)行鍵值對對象中的onSubmit睬澡，則獲取到this.state對象中的newTodo箱蝠，于是就獲取到字符串“啊聪廉，藏得整么深還是被發(fā)現(xiàn)了啊啊啊啊”檩小。
不愿意聽我白話想自己看文檔的滥壕，點擊這里而账！
the end
