如何简单使用react,以及react的两种写法

最新推荐文章于 2023-04-06 16:10:10 发布

黑爱紫秀

最新推荐文章于 2023-04-06 16:10:10 发布

阅读量546

点赞数 1

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_62228315/article/details/127720348

版权

React的简单使用

React的相关使用

React的相关使用

1.React的特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

2.函数式和类式的写法

前提：引入环境变量直接在html文件里写

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
 <!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
- react.js：
 
   	React核心库，专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个库中。
 
 - react-dom.js：
 
   	提供操作DOM的react扩展库。即要将创建的虚拟DOM渲染到页面上，就是`ReactDOM.render()`。
 
 - babel.min.js：
 
   	解析JSX语法代码转为JS代码的库。
   
   - script的type必须是：`text/babel`
   - 创建虚拟DOM的时候，一定不能加单引号，因为它本身其实不是标签，而是jsx。

最基本的写法

<body>
    <!-- 创建一个容器，将虚拟DOM渲染到容器里面 -->
    <div id="app"></div>
    <script type="text/babel">
        // 创建虚拟dom
        // const rDom=<h1>one</h1>
        // ReactDOM.render(rDom,document.getElementById("app"))
        
        ReactDOM.render(
            <h1>two</h1>,
            document.getElementById('app')
        )
    </script>
</body>

1.函数式

<div id="fly"></div>
    <script type="text/babel">
        // 创建函数式组件
        function Mycomponent(){
            return <div>
                    <h2>他乡纵有当头月，不及故乡一盏灯</h2>
                    <MyChild />
                </div>
        }
        function MyChild(){
            return <div>
                    <p>相见亦难别亦难，东风无力百花残</p>
                </div>
        }
        ReactDOM.render(<Mycomponent/>,document.getElementById('fly'))
    </script>

2.类式

<body>
    <div id="cs"></div>
    <script type="text/babel">
        class MyComponent extends React.Component{
            render(){
                return(
                    <div>
                        <h1>但愿人长久千里共婵娟</h1>    
                    </div>
                )
            }
        }
        ReactDOM.render(<MyComponent/>,document.getElementById('cs'))
    </script>
</body>

3.函数式和类式的区别：

(1）语法上的区别：函数式组件是一个纯函数，它是需要接受props参数并且返回一个react元素就可以了，类组件是需要继承react.component,而且class组件需要创建render
并且返回react元素，语法上来讲更复杂
（2）调用方法：函数式组件可以直接调用，返回一个新的react元素，类组件在调用时是需要创建一个实例的，然后通过调用实例里的render方法来返回一个react元素
（3）状态管理：函数式组件没有状态管理，类组件有状态管理
（4）使用场景：类组件没有具体的要求，函数式组件一般是用在大型项目中来分割大组件，一般情况下能用函数式组件就不用类组件提升效率

先稍微写这么多，后续还会用refs相关和createRef创建容器的使用，请持续关注