JSX
類似于 Android 中的 xml棚品，完成布局的同時艺栈，包含了邏輯部分。
public render() {
return (
<View>
<FlatList
data={routeMap}
keyExtractor={this.keyExtractor}
ItemSeparatorComponent={SeparatorLine}
renderItem={({ item }) => (this.renderItem(item, () => {
// @ts-ignore
this.props.navigation.navigate(item.name);
}))}
/>
</View>
);
}
其實這個本質上是一種語法糖放妈，在編譯期會被轉成 JS Object北救。例如
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
轉換后:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
Component
React 中最核心最基礎的概念∥呤悖可以說珍策，在 React 中，Everything is Component宅倒。
export interface ProjectCountProps {
count: number
};
export interface ProjectCountState {
text: string
}
class ProjectCountShow extends React.Component<ProjectCountProps, ProjectCountState> {
constructor(props: ProjectCountProps) {
super(props)
this.state = {text: ''}
}
componentDidMount() {
this.setState({text: "a"});
}
public render () {
return (
<div>
<h1>組件狀態(tài): {this.state.text}</h1>
<h2>統(tǒng)計: {this.props.count}</h2>
</div>
)
}
};
Props & State
Component 涉及到兩個重要概念 Props 和 State
- Props 組件的屬性攘宙。它應該是 Component 對外提供，由外部傳入唉堪，內部只讀模聋。
- State 組件的狀態(tài)。只在內部維護唠亚，對外不可見链方。State 的變化會觸發(fā)組件的重新渲染。
函數式組件
復雜的狀態(tài)管理灶搜，會增加代碼的維護成本祟蚀，降低可讀性工窍。所以業(yè)務開發(fā)中盡量實現無狀態(tài)組件，也叫函數式組件前酿。
export interface ProjectCountProps {
count: number
};
const PeojectCountF = (props: ProjectCountProps) => {
return (
<div>
<h2>統(tǒng)計: {props.count}</h2>
</div>
)
}
HOC(Higher-Order Component)
高階組件：輸入一個組件患雏，返回一個新組件。
高階組件非常適合 UI 和邏輯解耦的場景罢维。例如實現一個基礎控件組件淹仑，但是實際的業(yè)務邏輯處理放在高階組件內。
export interface UserComponentProps {
name: string;
}
class UserComponent extends Component<UserComponentProps> {
render() {
return (
<View>
<Text>{this.props.name}</Text>
</View>
);
}
}
export default (userComponent: UserComponent) => {
class UserStoreComponent extends Component<{}, { name: string | null }> {
constructor(props: any) {
super(props);
this.state = { name: null }
}
componentWillMount() {
let name = localStorage.getItem('name');
this.setState({ name });
}
render() {
return <UserComponent name={this.state.name || ''} />
}
}
return UserStoreComponent;
}
組件的生命周期
Component生命周期
生命周期分為兩個階段：
- 掛載階段
- 更新階段
掛載階段
顧名思義肺孵，掛載階段即一個新的組件掛到組件樹的過程中匀借，所觸發(fā)的生命周期方法。
- componentWillMount: 掛載開始之前調用平窘，也就是 render 方法執(zhí)行之前調用吓肋。可以在這個方法中執(zhí)行數據準備操作
- componentDidMount: 掛載完成
- componentWillUnmount: 組件從樹中被移除
更新階段
更新階段是組件的變化的過程瑰艘。當 props 或者 state 發(fā)生變化時自動觸發(fā)相應方法是鬼。
- shouldComponentUpdate(nextProps, nextState): 可以根據情況自行控制是否執(zhí)行渲染
- componentWillReceiveProps(props): 從父組件收到新的 props 變化之前調用
- componentWillUpdate: 重新渲染之前調用
- componentDidUpdate: 每次重新渲染完成后調用
Smart vs Dumb 組件
掌握以上內容之后，基于 React 的開發(fā)基本沒有太大障礙紫新。 還有一些深入的細節(jié)例如 ref均蜜、context 等不建議直接使用，前端技術棧工具環(huán)境特別豐富弊琴，各種場景都能找到對應的解決方案兆龙。
但是從業(yè)務開發(fā)的角度看，如果我們的業(yè)務場景還不是太復雜敲董，還不太需要引入狀態(tài)管理框架來管理數據狀態(tài)的時候紫皇，我們如何劃分和組織 Component 呢？
從邏輯上我們可以將組件劃分為 Smart 和 Dumb 組件腋寨。
- Dumb 組件只根據 props 渲染對應的 UI 元素聪铺，不維護內部 state 狀態(tài)。等效于函數式組件萄窜。 這種組件更易于維護铃剔、復用、測試查刻，是穩(wěn)定性的保障键兜。
- Smart 組件: 僅有 Dumb 組件是不能完成整體業(yè)務邏輯的，所以可以在 Smart 組件內完成邏輯部分的操作穗泵，然后分發(fā)給 Dumb 組件普气。
