react native切换页面闪烁_史上最贴心React渲染器开发辅导

这个故事要从几年前，React 和 react-dom 离婚说起，先插一嘴，第三者不是张三(纯博人眼球)。

React 刚流行起来时，并没有 react-dom ，突然有一天，React 发达了，想学时间管理，然后阅人无数，就这样 React 成了王，而 react-dom 与之分开沦为了妾，React 可谓妻妾成群，我们随便举几个例子： React-Native 、Remax 等。为啥 React 如此无情？我摊牌了，编不下去了，就说好好写文章他不香吗？

正儿八经的，我们开始！

相信大家对于跨端这个概念不陌生，什么是跨端？就是让你感觉写一套代码可以做几个人的事，比如，我用 React 可以写Web 、可以写小程序 、可以写原生应用，这样能极大降低成本，但其实，你的工作交给 React 去做了，我们可以对应一下：

•web：react-dom•小程序：remax•ios、android：react-native

这样一捋是不是清晰了？我们再看一张图

到这里，你是否明白了当初 React 和 react-dom 分包的用意了？React 这个包本身代码量很少，他只做了规范和api定义，平台相关内容放在了与宿主相关的包，不同环境有对应的包面对，最终展现给用户的是单单用 React 就把很多事儿做了。

那按这样说，我们是不是也可以定义自己的React渲染器？当然可以，不然跟着这篇文章走，学完就会，会了还想学。

创建React项目

首先使用React脚手架创建一个demo项目

安装脚手架

npm i -g create-react-app

创建项目

create-react-app react-custom-renderer

运行项目

yarn start

现在我们可以在vs code中进行编码了

修改 App.js 文件源码

import React from "react";import "./App.css";class App extends React.Component {
      constructor(props) {
        super(props);    this.state = {
          count: 0,    };  }  handleClick = () => {
        this.setState(({ count }) => ({ count: count + 1 }));  };  render() {
        const { handleClick } = this;    const { count } = this.state;    return (      <div className="App">        <header className="App-header" onClick={handleClick}>          <span>{count}span>        header>      div>    );  }}export default App;

打开浏览器