JSX

類似于 Android 中的 xml，完成布局的同時(shí)，包含了邏輯部分。

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>
       );
   }

其實(shí)這個(gè)本質(zhì)上是一種語法糖，在編譯期會(huì)被轉(zhuǎn)成 JS Object。例如

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

轉(zhuǎn)換后:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Component

React 中最核心最基礎(chǔ)的概念。可以說，在 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)計(jì): {this.props.count}</h2>
            </div>
              
        )
    }
};

Props & State

Component 涉及到兩個(gè)重要概念 Props 和 State

• Props 組件的屬性。它應(yīng)該是 Component 對外提供，由外部傳入，內(nèi)部只讀。
• State 組件的狀態(tài)。只在內(nèi)部維護(hù)，對外不可見。State 的變化會(huì)觸發(fā)組件的重新渲染。

函數(shù)式組件

復(fù)雜的狀態(tài)管理，會(huì)增加代碼的維護(hù)成本，降低可讀性。所以業(yè)務(wù)開發(fā)中盡量實(shí)現(xiàn)無狀態(tài)組件，也叫函數(shù)式組件。

export interface ProjectCountProps {
    count: number
};
  
const PeojectCountF = (props: ProjectCountProps) => {
    return (
        <div>
            <h2>統(tǒng)計(jì): {props.count}</h2>
        </div>
    )
}

HOC(Higher-Order Component)

高階組件：輸入一個(gè)組件，返回一個(gè)新組件。
高階組件非常適合 UI 和邏輯解耦的場景。例如實(shí)現(xiàn)一個(gè)基礎(chǔ)控件組件，但是實(shí)際的業(yè)務(wù)邏輯處理放在高階組件內(nèi)。

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生命周期

生命周期分為兩個(gè)階段：

• 掛載階段
• 更新階段

掛載階段

顧名思義，掛載階段即一個(gè)新的組件掛到組件樹的過程中，所觸發(fā)的生命周期方法。

• componentWillMount: 掛載開始之前調(diào)用，也就是 render 方法執(zhí)行之前調(diào)用?？梢栽谶@個(gè)方法中執(zhí)行數(shù)據(jù)準(zhǔn)備操作
• componentDidMount: 掛載完成
• componentWillUnmount: 組件從樹中被移除

更新階段

更新階段是組件的變化的過程。當(dāng) props 或者 state 發(fā)生變化時(shí)自動(dòng)觸發(fā)相應(yīng)方法。

• shouldComponentUpdate(nextProps, nextState): 可以根據(jù)情況自行控制是否執(zhí)行渲染
• componentWillReceiveProps(props): 從父組件收到新的 props 變化之前調(diào)用
• componentWillUpdate: 重新渲染之前調(diào)用
• componentDidUpdate: 每次重新渲染完成后調(diào)用

Smart vs Dumb 組件

掌握以上內(nèi)容之后，基于 React 的開發(fā)基本沒有太大障礙。 還有一些深入的細(xì)節(jié)例如 ref、context 等不建議直接使用，前端技術(shù)棧工具環(huán)境特別豐富，各種場景都能找到對應(yīng)的解決方案。

但是從業(yè)務(wù)開發(fā)的角度看，如果我們的業(yè)務(wù)場景還不是太復(fù)雜，還不太需要引入狀態(tài)管理框架來管理數(shù)據(jù)狀態(tài)的時(shí)候，我們?nèi)绾蝿澐趾徒M織 Component 呢？

從邏輯上我們可以將組件劃分為 Smart 和 Dumb 組件。

• Dumb 組件只根據(jù) props 渲染對應(yīng)的 UI 元素，不維護(hù)內(nèi)部 state 狀態(tài)。等效于函數(shù)式組件。 這種組件更易于維護(hù)、復(fù)用、測試，是穩(wěn)定性的保障。
• Smart 組件: 僅有 Dumb 組件是不能完成整體業(yè)務(wù)邏輯的，所以可以在 Smart 組件內(nèi)完成邏輯部分的操作，然后分發(fā)給 Dumb 組件。