react全家桶笔记---react 的基本使用

最新推荐文章于 2022-12-18 19:30:05 发布

造遥

最新推荐文章于 2022-12-18 19:30:05 发布

阅读量648

点赞数

文章标签： vue.js react.js javascript

本文链接：https://blog.csdn.net/qq_53138106/article/details/121574926

版权

一、引入模块

react 模块

react-dom 模块

注： react 有个说法叫做一次学习，多地方使用，什么意思呢？举例子：以前的 jquery
在写web项目时运行极少出现卡顿的情况，但是用来写手机端的一些应用就会显得特别吃力（本人技术尚且不足以解析为什么卡顿，只是大概知道是性能问题，jq更多的是操作节点的，而节点操作是很吃性能的）,react
的胃口比较大，实现多种场景下的编写，而且性能很好

。

二、开始使用 react
1、使用 npm 安装

npm install react react-dom

react 模块是必须的，react-dom 模块看情况，web 项目用 react-dom 、手机应用用 react-natice

2、导入

<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

注意：我们引入的是开发版本 react.development.js ，以后再写一篇有关版本分类的内容

3、react 的简单使用

<body>
    <div id="app"></div>
</body>
<script>

    // 创建一个节点新的节点"<span>sapn节点<span>"放到<div id="app"></div>中间
    // ① 创建节点
    const span =  React.createElement('span',null,'我手机')
   // ② 插入到id="app"
    ReactDOM.render(span,document.querySelector('#app'))
    
</script>

知识点总结与补充

React 模块提供 了创建节点的方法 React.createElement(type,props,children)
这个方法有三个参数:
type: 是节点的类型，如： 'div'
props: 是节点的属性，没有可以写 null
cheildren: 是子节点

文中的 children 是一段文字，如果想写子节点，且有多个就以下写法： 
    const span =  React.createElement('span',null,
    [React.createElement(type,props,children),
    React.createElement(type,props,children)
    )
就是用数组装起来。然后就按要求写即可

react-dom 模块提供了，渲染到节点上的方法 ReactDOM.render(vNode, target) 这个方法有俩个参数：
vNode: 是虚拟节点，也就是我们创建的节点 target: 是要在渲染的地方，我们可以看到我们是这样写的
document.querySelector(’#app’))，是获取到一个真的节点我们现在现在思考个问题就是，在我们创建节点时是否觉得
React.createElement
的用法比较繁琐，就套一层表签就要写如此之多的代码，再套上一两层此不更繁琐对吧，那有没有一些快捷的方法呢，是有的，就是下面我们的下个知识点
jsx

造遥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react全家桶笔记---react 的基本使用

一、引入模块react 模块react-dom 模块注： react 有个说法叫做一次学习，多地方使用，什么意思呢？举例子：以前的 jquery在写web项目时运行极少出现卡顿的情况，但是用来写手机端的一些应用就会显得特别吃力（本人技术尚且不足以解析为什么卡顿，只是大概知道是性能问题，jq更多的是操作节点的，而节点操作是很吃性能的）,react的胃口比较大，实现多种场景下的编写，而且性能很好。二、开始使用 react1、使用 npm 安装npm install react rea
复制链接

扫一扫