React引入本框架

2024-09-28 23:52:33首发，1周前更新

本框架在React内外均可引入，可以React内部任意地方使用webcomponent组件，可在useEffect方法中使用本框架模块。

react系列文档

React引入本框架 1周前更新

前言

React是目前国际上最流行的前端开发框架，该框架是完美支持Webcomponent的，所以对于本框架的所有Webcomponent组件都有很好的适配。对于独立的模块，可以在节点渲染完毕之后使用，比如useEffect方法中。

简单使用

React与Vue虽然目的相同，但是具体实现还是有不少差别的，先说本例的基础要点：

React用于浏览器环境必须引入逻辑和数据处理js文件（react.js）和虚拟节点处理js文件（react-dom.js）。
不像Vue允许使用use方法去导入第三方框架，React不需要专门导入。
在React中使用useEffect方法来代替Vue中mounted钩子，在useEffect方法中可以使用document.querySelector方法找到节点。

AXUI的自定义组件可以在React组件内任意使用；在完成渲染后，AXUI的所有功能模块都能使用。

输出
HTML
JS

```
                
                
            
```

                
                let { useState, useEffect } = React;
                let App = () => {
                    let [message] = useState("Hello React!");
                    //已渲染完毕
                    useEffect(() => {
                            document.querySelector('#demo01').onclick = ()=>{
                                console.log(ax);
                                //正常使用AXUI的模块或组件
                                ax.alert({content:`已经引入了AXUI`});
                            }
                        }, []);
                        return React.createElement(
                            "div", 
                            null,
                            React.createElement("ax-btn", { id: "app01",label:message }),
                            React.createElement("ax-btn", { id: "demo01",label:'引入 AXUI' })
                        );
                };
                // 渲染 React 组件到页面上
                ReactDOM.render(React.createElement(App), document.getElementById("app"));

使用JSX语法

与React搭配使用的高效渲染工具是使用JSX语法，通常在node环境，使用babel将React的JSX模板编译为React语法的js文件作为一个组件，再与React的其他文件打包为一个mini文件供浏览器使用。

目前浏览器并不直接支持JSX的语法，需要借助babel进行hack处理。JSX模板必须写在type="text/babel"的script脚本里。

输出
HTML
JS

```
                
                
            
```
```
                
                
            
```

Vue引入本框架

1周前更新

很抱歉没有了