如何做视图和视图逻辑分离的

作者 | 二哲

来源 | web前端开发（web_qdkf）

本文将分享一下过去一年里，我们项目是如何做视图与业务逻辑抽离的。

什么是视图？什么是逻辑？

正所谓视图就是身为一个用户可见到的图像，对于这个图像来说它正是广为流传的 view = f(data)。这个公式精确的表达了视图就像是一个函数一般，输入即输出，所见即所得，没有任何副作用。

<div>	
<input placeholder="修改名字" onChange={handleChange} />	
<p>姓名：{username}</p>	
<div>

以上这样一段DOM代码，它就是我们所见到的视图，它是纯粹的，给了什么就会渲染什么。当用户有了交互的事件，数据有了变化，就会渲染新的视图。

而视图逻辑就是我们前端工程师对视图的显示，对视图的 data 进行的处理。它可能是来自于服务端，可能是来自于本地，亦或者是来自于用户自有的操作行为。一切让数据改变，或者对数据进行操作的行为等等，这些都是我们的业务逻辑。

username = api.getUserName()	
handleChange(e) {	
    this.username = e.target.value;	
}

过去的组件

按照惯例，我们会习惯于把视图和业务逻辑都写在一起，当视图越来越庞大或者逻辑越来越复杂。就会让我们的代码越来越不易维护和测试。比如这样的代码

class Demo extends React.Component<Props> {	
  constructor(props: Props) {	
    super(props);	
    this.state = {	
      data: null,	
    }	
  }	
  async componentDidMount() {	
    const ret = http.get(`/api/xx/${this.props.id}`);	
    this.setState({	
      data: ret.data,	
    })	
  }	
  handleClick = () => {	
    // do something...	
  }	
  // other methods...	
  render() {	
    return (	
      <div>	
        <p onClick={this.handleClick}>click</p>	
        {this.state.data}	
      </div>	
    )	
  }	
}