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>组件状态: {this.state.text}</h1>
                <h2>统计: {this.props.count}</h2>
            </div>
              
        )
    }
};

Props & State

Component 涉及到两个重要概念 Props 和 State

Props 组件的属性。它应该是 Component 对外提供，由外部传入，内部只读。
State 组件的状态。只在内部维护，对外不可见。State 的变化会触发组件的重新渲染。

函数式组件

复杂的状态管理，会增加代码的维护成本，降低可读性。所以业务开发中尽量实现无状态组件，也叫函数式组件。

export interface ProjectCountProps {
    count: number
};
  
const PeojectCountF = (props: ProjectCountProps) => {
    return (
        <div>
            <h2>统计: {props.count}</h2>
        </div>
    )
}

HOC(Higher-Order Component)

高阶组件：输入一个组件，返回一个新组件。
高阶组件非常适合 UI 和逻辑解耦的场景。例如实现一个基础控件组件，但是实际的业务逻辑处理放在高阶组件内。

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

生命周期分为两个阶段：

挂载阶段
更新阶段

挂载阶段

顾名思义，挂载阶段即一个新的组件挂到组件树的过程中，所触发的生命周期方法。

componentWillMount: 挂载开始之前调用，也就是 render 方法执行之前调用。可以在这个方法中执行数据准备操作
componentDidMount: 挂载完成
componentWillUnmount: 组件从树中被移除

更新阶段

更新阶段是组件的变化的过程。当 props 或者 state 发生变化时自动触发相应方法。

shouldComponentUpdate(nextProps, nextState): 可以根据情况自行控制是否执行渲染
componentWillReceiveProps(props): 从父组件收到新的 props 变化之前调用
componentWillUpdate: 重新渲染之前调用
componentDidUpdate: 每次重新渲染完成后调用

Smart vs Dumb 组件

掌握以上内容之后，基于 React 的开发基本没有太大障碍。还有一些深入的细节例如 ref、context 等不建议直接使用，前端技术栈工具环境特别丰富，各种场景都能找到对应的解决方案。

但是从业务开发的角度看，如果我们的业务场景还不是太复杂，还不太需要引入状态管理框架来管理数据状态的时候，我们如何划分和组织 Component 呢？

从逻辑上我们可以将组件划分为 Smart 和 Dumb 组件。

Dumb 组件只根据 props 渲染对应的 UI 元素，不维护内部 state 状态。等效于函数式组件。这种组件更易于维护、复用、测试，是稳定性的保障。
Smart 组件: 仅有 Dumb 组件是不能完成整体业务逻辑的，所以可以在 Smart 组件内完成逻辑部分的操作，然后分发给 Dumb 组件。

02-React 介绍