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 组件。
