React学习笔记1

最新推荐文章于 2022-11-13 16:24:31 发布

果冻~

最新推荐文章于 2022-11-13 16:24:31 发布

阅读量184

点赞数

分类专栏： react 笔记文章标签： react

本文链接：https://blog.csdn.net/weixin_48653480/article/details/109313303

版权

react 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

笔记

15 篇文章 0 订阅

订阅专栏

什么是 React ?

React 是一个用于构建用户界面的 javascript 库。

react的特点：

1、声明式设计−React采用声明式，可以轻松描述应用。（开发者只需要声明显示内容，react就会自动完成）
2、高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。
3、灵活−React可以与已知的库或框架很好地配合。
4、组件− 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。（把页面的功能拆分成小模块–每个小模块就是组件）
5、单向数据流–　React是单向数据流，数据主要从父节点传递到子节点（通过props）。如果顶层（父级）的某个props改变了，React会重渲染所有的子节点

虚拟dom

虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能

react 在内存中生成维护一个跟真实DOM一样的虚拟DOM 树，每当数据发生变化，会再生成一个新得DOM，react 会把新虚拟DOM 跟原虚拟DOM 进行比对，找出两个DOM 不同的地方diff ，然后把diff放到队列里面，然后批量更新diff 到真实DOM 上。

diff算法：

计算出虚拟DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。

什么是调和：

将Virtual(虚拟)DOM树转换成actual(真实)DOM树的最少操作的过程称为调和

组件的基本概念与优势：

1、React的核心就是组件：组件的设计目的是提高代码复用率，降低测试难度和代码的复杂程度。
2、提高代码复用率：组件将数据和逻辑进行封装。
3、降低测试难度：组件高内聚低耦合（各个元素高集成度低关联性），很容易对单个组件进行测试。
4、代码的复杂程度：直观的语法，可以极大提高可读性。

组件化编程思想：

灵活的组件化设计思想，可以让你的页面功能更具复用性。同时低耦合度的组件可以让功能之间的影响降到最低！

React 依赖包下载：

npm install react react-dom babel-standalone --save
注意：react需要引入三个包：（必须按照如下的顺序引入）

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

react.js文件是创建React元素和组件的核心文件，
react-dom.js文件用来把React组件渲染为DOM，此文件依赖于react.js文件，需在其后被引入。
Babel的主要用途是将ES6转成ES5 同时可以把JSX 语法转换新标准的JavaScript代码让现今浏览器兼容的代码

React --根DOM节点：

页面中需要有一个div容器，容器中的内容都会被React Dom所管理。
这个容器叫做根DOM节点
注意：通常React 开发应用时一般只会定义一个根节点。

React --JSX：

1、什么是JSX：JSX=javascript xml就是Javascript和XML结合的一种格式。是JavaScript 的语法扩展，只要你把THML代码写在js里，那就是JSX
。
2、 React推荐在 React 中使用 JSX 来描述用户界面。当遇到（JSX就当HTML解析，遇到{就当JavaScript解析。

3、在实际开发中，JSX 在产品****打包阶段****都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。官方定义是：类 XML 语法的 ECMAScript 扩展。

4、JSX的进一步理解（为什么要搞个JSX）：任何软件项目都有界面和逻辑，而传统的CS开发里，一门语言完成了界面和数据，但是在BS（web）开发里，要完成界面和数据，需要三门语言：HTML，CSS，JS，而JSX完美的解决了这个问题，在JSX中把原生的JS，HTML都包含了。

5、外置jsx 如果想使用外置的jsx 那么必须在引用的时候加上 type=“text/babel”
下面这个js-css-html这个插件需要关掉，不然会报错
在这里插入图片描述
通过Babel，JSX会把转换为使用React.createElement()类的ES5的语句
注多行代码必须有根DOM节点包这

render的作用是将虚拟DOM转换成真是DOM

JSX中使用模板语法：

可以任意地在 JSX 当中使用 JavaScript表达式，在 JSX 当中的表达式要包含在大括号{}里。

`注意`在写html的时候必须严格尊w3c的规范来完成html的编写（不然会报错）

  例如标签必须有开始和结尾
  单标签在标签内加上"/"

属性插值

    <div id="box"></div>

    <script type="text/babel">
    let src="http://www.baidu.com/"
    let com=(
        <a href={src}>点击去百度</a>
    )
        ReactDOM.render(com,document.getElementById("box"))
    </script>

jsx设置样式

1、使用类名的方式来进行设置但是注意原本的class 必须必须必须改成className来进行类名的设置因为class是es6的关键字

<style>
    .box{
        color: red;
    }
</style>
<body>
    <div id="box"></div>

    <script type="text/babel">
    let text="哈哈哈"
    let com=(
       <div className="box">{text}</div>
    )
        ReactDOM.render(com,document.getElementById("box"))
    </script>

2、行内样式的设置：
在设置行内样式的时候传递进来的必须是一个对象而且如果样式有多个单词的话需要把 - 替换成大写驼峰style{{color:"red",backgroundColor:"pink",border:"2px solid black",width:200,textAlign:"center"}}我是使用行内样式修改的

    <body>
        <div id=box></div>
        <script type=text/babel>
            let text="哈哈哈"
            let style={
                color:"red",
                backgroundColor:"pink",
                border:"2px solid black",
                width:200,
                textAlign:"center"
            }
            let com=(
                 <h1 className="demo" style={style}>{text}</h1>
            )
            ReactDOM.render(com,document.getElementById("box"))
        </script>
  </body>

`属性小扩展:`

1、html的value属性要写成：defaultValue
2、html的checked属性要写成：defaultChecked
3、style 里面写对象
4、class 写className
5、label标签中的from要写成：htmlFor

四种基本列表 --循环遍历

React 列表渲染

1、map方式的组件

<body>
      <div id=box></div>
      <script type=text/babel>
         let arr=[
             "AA","BB","CCC","DD","FF"
         ]
         let newHtml=arr.map((v,i)=>{
             return (
                 <li>{v}</li>
             )
         })
         ReactDOM.render(newHtml,document.getElementById("box"))
      </script>
</body>

2、函数方式的组件

<body>
      <div id=box></div>
      <script type=text/babel>
         let arr=[
             "AA","BB","CCC","DD","FF"
         ]
         function fun() {
            return arr.map((v,i)=>{
             return (
                <h1>{v}</h1>
             )
         })
         }
         let newHtml=(
             <h1>{fun()}</h1>
         )
         ReactDOM.render(newHtml,document.getElementById("box"))
      </script>
</body>

3、数组的方式

    <body>
        <div id=box></div>
        <script type="text/babel">
          let arr=[
                 "AA","BB","CCC","DD","FF"
             ]
             let newArr=[]
             for(let i=0;i<arr.length;i++){
                newArr.push(<li onClick={fun} key={i}>{arr[i]}</li>)
             }
             let newHtml=(
                 <ul>{newArr}</ul>
             )
             function fun(){
                 console.log(newArr)
             }
             ReactDOM.render(newHtml,document.getElementById("box"))
             console.log(newArr)
        </script>
    </body>

4、from循环的组件


<body>
    <div id=box></div>
    <script type="text/babel">
      let arr=[
             "AA","BB","CCC","DD","FF"
         ]
         let newArr=[]
         for(let i=0;i<arr.length;i++){
            newArr.push(<li>{arr[i]}</li>)
         }
         let newHtml=(
             <ul>{newArr}</ul>
         )
         ReactDOM.render(newHtml,document.getElementById("box"))
         console.log(newArr)
    </script>
</body>

点击变色

<style>
    .red{
        background-color: red;
    }
</style>
<body>
    <body>
        <div id=box></div>
        <script type=text/babel>
            let arr=[
               "AA","BB","CCC","DD","FF"
           ]
           let num=-1
          function fun(){
            return arr.map((item,index)=>{
                  return (
                      <li key={index} className={num===index?"red":""} onClick={()=>{num=index;render()}}>{item}</li>
                  )
              })
          }
            function render() {
                return ReactDOM.render(fun(),document.getElementById("box"))
            }
            render()
        </script>
  </body>

果冻~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习笔记1

什么是 React ?React 是一个用于构建用户界面的 javascript 库。react的特点：1、声明式设计−React采用声明式，可以轻松描述应用。（开发者只需要声明显示内容，react就会自动完成）2、高效−React通过对DOM的模拟，最大限度地减少与DOM的交互。3、灵活−React可以与已知的库或框架很好地配合。4、组件− 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。（把页面的功能拆分成小模块–每个小模块就是组件）5、单向数据流–　
复制链接

扫一扫