从 React 架构开始讲解 useState、useEffect 编程设计

随着前端开发复杂度增加，原生开发模式显得越来越笨重，前端框架也层出不穷。

MVC 和 MVVM

MVC

MVC是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。

Model（模型）：数据。
View（视图）：用户界面。
Controller（控制器）：业务逻辑。

MVVM

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。

React Component class编程

React 是一个用于构建用户界面的 JavaScript 库，注重于 View 层。

React Component 并没有严格的M，V区分，只是模糊的定义了几块内容：

state：数据存放
render：用户界面
setState | forceUpdate：渲染用户界面

所以我们的代码逻辑是这样的：

定义state
根据state编写render
render中加入事件，修改state，且渲染用户界面

以上1，2两步完成后，我们就不再需要关心render，因为render依赖state，我们只需要关心如何修改state，然后需渲染时，setState | forceUpdate就可以了。

生命周期 componentDidMount 也是很重要的，它再组件完成后只执行一次, 可以用于请求数据，然后设置state。

渲染页面（setState）：state -> view。

书写思路清晰的代码，要清晰的知道数据的流向，我们这样设计。

初始化阶段：框架自动渲染一次 -> componentDidMount -> 手动渲染
用户操作：操作 -> 修改state -> 手动渲染

总结：写好render和state对应的规则后，只需要专心与如何修改state，然后执行渲染即可。

例子：列表请求

请求与请求参数的分离也是代码清晰程度的重要一部分。

setState最重要的还有第二个参数，是设置成功后的回调函数。React的state可以让我们专心开发某一块，例如我们写一个列表

state = {

  page: 1,

  dataList: null,

}

// 请求列表

fetchDataList = () => {

  const { page } = this.state;

  let data = '通过page参数请求得到的数据';  // 通过请求得到数据

  this.setState({ dataList: data });

}

// 翻页

handlePageChange = (page) => {

  this.setState({ page }, this.fetchDataList);

}

写一个请求方法，请求得到的参数完全从state中获取，得到数据后会setState渲染页面，所以我们只需要专心致志于设置state，在回调中发送请求。这样，一切都看起来那么清晰。

特殊使用

由于 state 是引用类型，所以我们可以使用 this.state.xx = xx 来修改数据，React 官方并不推荐此种修改方式，因为此方法并没有渲染页面，并不能直接的感受到数据的变化。

了解了 React 渲染机制后，只要清晰我们再做什么，也可以使用此种方法修改数据，并且大量能减少代码量。

例如：页面上有两个按钮，一个按钮记录此按钮点击次数，另一个按钮点击后，才会显示第一个按钮的点击次数。

使用常规setState方式，需要两个变量计数。

state = {

  clickCount: 0;

  viewCount: 0;

}

btn1Click = () => {

  this.setState({clickCount: this.state.clickCount +1 });

}

btn2Click = () => {

  this.setState({viewCount: this.state.clickCount });

}

render() {

  return <div>{this.state.viewCount}</div>

}

如果使用隐士赋值，只需要一个变量，并且再需要渲染的时候手动渲染。

state = {

  count: 0;

}

btn1Click: () => {

  this.state.count++;

}

btn2Click: () => {

  this.forceUpdate(); // 强制渲染 相当于 this.setState({})

}

render() {

  return <div>{this.state.viewCount}</div>

}

当然，这种方式要在对 React 渲染机制清晰后再使用。

这就体现了React的灵活性，按需渲染。

React Hooks 函数式编程

React 16.7推出了 React Hooks 函数式编程。不用传统的类方式，写法大有不同。

首先看渲染机制，Component方式，渲染后，只执行了render方法，类里面的其他方法不会执行。而 React Hooks 函数式编程每次渲染，都会把整个函数执行一遍，并提供了一个数据存放地 useState。

useState

// 声明一个叫 "count" 的 state 变量

const [count, setCount] = useState(0);

setCount 用来设置 count 并且渲染页面，且只有这一种渲染方式，这就意味着，我们不能像 Component 那样灵活的按需渲染了。

useEffect

useEffect(function () {

  // do sth..

}, [])

useEffect 第一个参数是一个函数，满足条件后会触发。第二个参数是个数组，如果是个空数组则只执行一次第一个参数函数（相当于componentDidMount），如果里面放变量，执行一次后，以后每次渲染后就监听变量有没有改变，如果改变就执行第一个函数。

与 class 方式的对比

对比 React.Component 和 React Hooks，它们都有存放数据的state，通过state渲染页面的render，和手动渲染的方法setState或者setXXX。

不同的是，React.Component有setState成功后的回调，React Hooks没有。

例如使用 React Hooks 执行下面代码

setCount(2);

console.log(count);

count拿到的总是设置前的值。

useState、useEffect代码设计

看到知乎上一句话：先做什么再做什么这种callback的写法是倾向于命令式,而使用hooks编写代码则更倾向于声明式.你不需要去指定你要的动作发生的时机, 而是声明一个条件或者依赖来让React来决定正确的执行时间点。

所以我们要转变思路，不要去控制何时渲染页面，因为每一次set都会渲染页面，需要的是在useEffect里写条件，让React自己决定渲染。

如请求改造如下

const [page, setPage] = useEffect(1);          // 请求参数 page

const [pageSize, setPageSize] = useEffect(20); // 请求参数 pageSize

const [type, setType] = useEffect(1);          // 请求参数 type

const [dataList, setDataList] = useEffect(1);  // 请求得到的数据

useEffect(function () {

  fetchDataList();

}, [page, pageSize, type]);

const fetchDataList = function () {

  let data = '通过page pageSize type请求到的数据';

  setDataList(data);

}

组件第一次执行或者page，pageSize，type改变，就会请求数据，然后set新数据渲染页面。

上面代码基本上满足了我们需要，然后在极端情况下，即使请求参数改变，也不需要发请求。对此我们需要另外设置一个变量控制是否发请求。

const [sendRequest, setSendRequest] = useEffect(0);  // 控制发请求

useEffect(function () {

  fetchDataList();

}, [sendRequest]);

const handlePageChange = (page) => {

  setPage(page);

  setSendRequest(Math.random());

}

但是这种写法还是运用了命令式，违背了React Hooks本意，不推荐。推荐规则写在useEffect中。

渲染优化

不管是 class 方式还是函数式编程，都需要关心一个问题：合理渲染。

class 方式在每次 setState 或者 forceUpdate 都会执行render函数渲染。

函数式编程方式在useState中每次set新数据后，就会重新执行整个函数并渲染。

React 重要特征是，一般情况下，父组件渲染，子组件也会渲染。所以在顶层容器中，要合理渲染，尽可能的抽成更小的组件，防止不必要的渲染。

class 方式中，state只放与rander有关的变量，无关的可以放在class外，减少setState的使用。函数式编程一样，和return无关的变量可以放在函数外。

whosmeya.com