02-React 介绍

JSX

类似于 Android 中的 xml，完成布局的同时，包含了逻辑部分。

public render() {
       return (
           
                (this.renderItem(item, () => {
                       // @ts-ignore
                       this.props.navigation.navigate(item.name);
                   }))}
               />
           
       );
   }

其实这个本质上是一种语法糖，在编译期会被转成 JS Object。例如

const element = (
  

    Hello, world!
  
);

转换后:

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 {
    constructor(props: ProjectCountProps) {
        super(props)
        this.state = {text: ''}
    }
  
    componentDidMount() {
        this.setState({text: "a"});
    }
  
    public render () {
        return (
            

                
组件状态: {this.state.text}
                
统计: {this.props.count}
            
              
        )
    }
};

Props & State

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

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

函数式组件

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

export interface ProjectCountProps {
    count: number
};
  
const PeojectCountF = (props: ProjectCountProps) => {
    return (
        

            
统计: {props.count}
        
    )
}

HOC(Higher-Order Component)

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

export interface UserComponentProps {
    name: string;
}
class UserComponent extends Component {
    render() {
        return (
            
                {this.props.name}
            
        );
    }
}
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 
        }
    }
    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 组件。