这个故事要从几年前,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;
打开浏览器ÿ