react（尚硅谷）01-jax，面向组件编程，函数式组件，类式组件，三大属之state，绑定事件，解决this指向问题，state状态的更改，state的一些理解

最新推荐文章于 2022-02-07 13:46:19 发布
最新推荐文章于 2022-02-07 13:46:19 发布
阅读量203 收藏 1
点赞数
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/121027171
版权
1、react初始案例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>

</head>
<body>
<div id="test"></div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建虚拟dom
    const VDOM=<h1>hello react</h1> /*此处不用写引号，因为不是字符串，jax特有的*/

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(VDOM,document.getElementById('test'))

  </script>


</body>
</html>
2、React.createElement()创建虚拟dom避免写jax语法（不建议，还是建议jax）

React.createElement()三个参数
1、标签名
2、标签属性，用json形式
3、标签内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>

</head>
<body>
<div id="test">
  <div id="title"></div>
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/javascript">
    //1、创建虚拟dom
    const VDOM=React.createElement('div',{id:'title'},'hello my React')

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(VDOM,document.getElementById('test'))

  </script>


</body>
</html>

最终还是建议jax，可以避免嵌套过多的情况，jax实质上就是语法糖，使用小括号后，虚拟dom的dom表达部分可以换行，缩进等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>

</head>
<body>
<div id="test">
  <div id="title"></div>
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建虚拟dom
    const VDOM=(<h1>
      <span>
        
      </span>
    </h1>)

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(VDOM,document.getElementById('test'))

  </script>


</body>
</html>
3、jax语法规则1（模板语法）
  • 1、定义虚拟dom时，不要写引号
  • 2、标签中混入js表达式需要使用{}
  • 3、变量最好使用小写，或者使用tolowcase
  • 4、使用样式需要使用className属性，而不是class
  • 5、内联style样式，需要使用style={{key:value}}
  • 6、react只允许有一个根元素（类似于vue）
  • 7、标签必须闭合
  • 8、标签首字母，

a、如果小写，则将该标签转为html同名元素，若无对应同名标签，则报错，
b、如果大写开头，则去渲染对应的组件，如果没有该组件，则报错

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <style type="text/css">
    .mystyle{ background-color: orange}
  </style>
</head>
<body>
<div id="test">
  <div id="title"></div>
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建虚拟dom
    const myid='nEwId'
    const mydata='hello jax'
    const VDOM=(
      <div>
        <div className="mystyle" id={myid.toLowerCase()} style={{fontweight: 'bold',color:'green'}}>{mydata}</div>
      </div>
    )

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>


</body>
</html>
4、jax语法规则2

{}内只能写表达式，不能写语句。
表达式是一个可以放在任意地点的代码，他会返回一个值
语句是一系列逻辑
遍历可遍历对象是，应当使用key做序列，提高虚拟dom效率

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    const datas=['angular','react','vue']
    //1、创建虚拟dom
    const vdom=(
      <div>
        <h1>
          <ul>
            {datas.map((item,index)=>{
              return <li key={index}>{item}</li>
            })}
          </ul>

        </h1>
      </div>
    )

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(vdom,document.getElementById('test'))
  </script>
</body>
</html>
5、react面向组件编程

安装react developer Tools
参考：
安装方法
下载地址
https://www.crx4chrome.com/crx/3068/

6、函数式组件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建函数式组件
    function MyComnponent(){
      return (
        <div>
          <h2>这是我的一个标签</h2>
          <ul>
            <li>这是一个列表</li>
          </ul>
        </div>
      )
    }

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(<MyComnponent/>,document.getElementById('test'))
  </script>
</body>
</html>
7、类式组件

类式组件创建组件的时候必须继承React.Component

执行了ReactDom.render（）之后发生了什么

  • 1、类式组件使用类定义，随后new出来该类的实例（渲染组件的时候自动创建），并通过该实例调用到原型上的render方法
  • 2、将render返回的虚拟dom转为正式dom，随后呈现在页面中
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建类式组件，必须继承react内置的Component类
    class MyComponent extends React.Component{
      render(){
        return <h1>hello , i am a component</h1>
      }
    }

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
  </script>
</body>
</html>
8、react三大属性state

state是在组件实例上的，默认为null，其实应该是个空对象
state是用来存放一些数据的，通过自定义对象的形式给state添加至
state由于是在实例上的，因此，可以通过this.state来获得state上的数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建类式组件，必须继承react内置的Component类
    class MyComponent extends React.Component{
      constructor (props) {
        super(props)
        this.state={ishot:false}//state需要是对象
      }
      render(){
        const {ishot}=this.state
        console.log(this)
        return <h1>今天天气很{ishot?'炎热':'凉爽'}</h1>
      }
    }

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
  </script>
</body>
</html>
9、react中绑定事件

react重写了所有时间因此原生js中的onclick变成了onClick
建议在渲染标签的内容中写事件，事件对应的回调函数直接写函数名，不要写小括号（那是调用）

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建类式组件，必须继承react内置的Component类
    class MyComponent extends React.Component{
      constructor (props) {
        super(props)
        this.state={ishot:false,wind:'微风'}//state需要是对象
      }
      render(){
        const {ishot}=this.state
        console.log(this)
        return <h1 onClick={clikDemo}>今天天气很{ishot?'炎热':'凉爽'}</h1>
      }
    }

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))

    //3、创建事件的回调函数
    function clikDemo () {
      console.log('title被点击了')
    }
  </script>
10、解决this指向问题
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建类式组件，必须继承react内置的Component类
    class MyComponent extends React.Component{
      constructor (props) {
        super(props)
        this.state={ishot:false,wind:'微风'}//state需要是对象
        this.changeWeather=this.changeWeather.bind(this)//这个非常关键，不用去that=this了，解决了this的指向问题
      }
      render(){
        const {ishot}=this.state
        console.log(this)
        return <h1 onClick={this.changeWeather}>今天天气很{ishot?'炎热':'凉爽'}</h1>
      }
      //3、创建事件的回调函数
      changeWeather () {
        console.log(this.state.ishot)
      }
    }

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))


  </script>
</body>
</html>
11、state状态的更改

state状态不能直接更改，要使用内置api更改
使用setState方法来修改
另外：

  • //创建事件的回调函数,这里将changeWeather作为赋值使用，使得changeweather变成了一个类的实例方法，
  • //使用箭头函数的好处就是箭头函数自身没有this，他会去寻找自己外层的this
  • //自定义方法要使用赋值语句+箭头函数的形式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--引入核心库，先核心库，在rect-dom操作dom库，最后babel注意顺序-->
  <script src="../js/react.development.js"></script>
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="test">
</div>

<!--  下面不能默认写默认js，必须写type并且是bable,实际是jax -->
  <script type="text/babel">
    //1、创建类式组件，必须继承react内置的Component类
    class MyComponent extends React.Component{
      //初始化状态，这里不用使用this，因为直接在类里使用
      state={ishot:false,wind:'微风'}//state需要是对象

      render(){
        const {ishot,wind}=this.state
        return <h1 onClick={this.changeWeather}>今天天气很{ishot?'炎热':'凉爽'},{wind}</h1>
      }
      //创建事件的回调函数,这里将changeWeather作为赋值使用，使得changeweather变成了一个类的实例方法，
      //使用箭头函数的好处就是箭头函数自身没有this，他会去寻找自己外层的this
      //自定义方法要使用赋值语句+箭头函数的形式
      changeWeather= ()=> {
        const ishot=this.state.ishot
        //特别注意，状态必须通过setState进行更新，且更新是一种合并，不是替换
        this.setState({ishot:!ishot})
      }
    }

    //2、渲染虚拟dom到页面,render三个参数，1，虚拟dom，2，渲染到的容器，3、回调函数
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))


  </script>
</body>
</html>
12、state的一些理解
  1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
  2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
  3. 组件中render方法中的this为组件实例对象
  4. 组件自定义的方法中this为undefined，如何解决？
    a) 强制绑定this: 通过函数对象的bind()
    b) 箭头函数
  5. 状态数据，不能直接修改或更新
心湖中的石子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
函数的四种调用方式以及this指向
CoderHenryLee的博客
02-11 1039
在ES6之前，我们要看一个函数内部的this到底是指向谁，那么就要通过观察函数是如何调用的，下面是函数的四种调用方式： 函数调用 示例1： var age=18; var p={ age:15 say:function(){ console.log(this.age);//window.age:18 } ...
usestate函数式更新_React函数式组件值之useState()
weixin_42129113的博客
01-14 1795
react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react 特性，而不仅限于 class 组件。react hooks 的出现，标示着 react 中不会在存在无状态组件了，只有类组件和函数组件。状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。相比类组件，函数组件足够简单，要使函数组件具有状态管理，可...
函数内部this的指向
Web_front的博客
03-02 238
1、函数也是对象 函数的创建==>底层都是new关键字创建函数 函数声明： function sum(a,b){ console.log(a+b); } 函数表达式： 1 var sum = function sum(a,b) { 2 console.log(a + b); 3 } new关键字创建函数 1 // 语法：var 变量名 = new Function ...
定义函数的方式及this指向问题
qq_44441669的博客
02-15 286
定义函数的方式 1.函数声明 2.函数表达式 var fn = new Function( "var name = 'zs'; console.log(name); " ) fn(); // console.dir(fn) // 这种定义函数的方式解析起来会比前两种慢 // 这种方式的执行过程是这样的。首先把function 中的字符串解析成js代码，然后将js代码解析成cpu可以执行的代码。所以...
react改变this.state的对象里面的值的方法
high_height的博客
11-20 5924
//伪代码 this.state={ person:{   sex:'',   age:'',   } } //改变state内部值 changeState=(type1,type1_child,data)=&gt;{ let state = {...this.state} state[type1][type2] = data this.setState({ ...
react-react面试题之对类组件和函数组件的理解.zip
最新发布
03-20
react面试题 react_react面试题之对类组件和函数组件的理解
react-d3-tree:React组件创建交互式D3树形图
04-30
React D3 Tree是一个组件，可让您利用的tree布局，以最小的设置将层次结构数据（例如，族谱，组织结构图，文件目录）表示为交互式树形图。 是否想了解v2中的更改？ 查看v2发行说明。 寻找v1？ 请点击这里。 内容...
react-native-root-toast:React原生吐司之类的组件，纯javascript解决方案
05-22
react-native-root-toast> = 2.1.0仅支持react-native> = 0.47.0，对于较低版本，请选择2.0.0或更低版本。 在react native> = 0.62中，新的LogBox组件将影响该组件的初始化。 为了使其正常工作，我们必须像这样在...
react-smooth-dnd：React包装器组件以实现smooth-dnd
02-05
React顺畅 快速和轻量级的拖放式可排序库，用于React，具有许多配置选项，涵盖许多d＆d场景。...import { Container , Draggable } from ' react-smooth-dnd ' ; class SimpleSortableList extends Compon
react-responsive-picture:面向未来的响应式图像组件，支持最新的Picture规范
05-14
支持最新的规范的面向未来的响应式图像组件。 使用来实现IE9 +的向后兼容性。 安装 npm install react-responsive-picture或yarn add react-responsive-picture 操场 您还可以通过克隆仓库和运行yarn start来运行...
React函数式组件改变状态useState()的用法
DangR_Jisoo的博客
12-10 3599
函数式组件主要使用 useState() 进行状态管理 如果页面中某个元素需要改变状态，必须进行以下步骤才能成功改变其状态 比如现在有一个需求， 启用状态 简而言之就是从React中引入useState()函数 import React, {useState} from 'react' 初始化状态 根据需求更新状态 ...
React 函数式组件的点击事件（代码中附类组件的点击事件）
liuye066的专栏
05-18 9790
在函数组件中根据onClick里调用的函数的写法不同，onClick={}里有多种调用方式。 第一种函数： function jump(url,event) { goToPage(url); } 当onClick={}里调用这个函数时，有两种写法： （1）方法名.bind(this,参数) <table onClick={jump.bind(this,goods.link)}> 如果直接用方法名(参数)调用的话，打开页面，该方法自动执行。 &l
React之函数中的this指向
weixin_30535043的博客
11-11 265
我们都知道在React中使用函数时，有两种写法，一是回调函数，二是直接调用，但需要在构造函数中绑定this，只有这样，函数中的this才指向本组件 总结一下没有绑定this的函数中的this指向 不管是在本组件的元素上调用的函数还是传递给子组件的函数，不管有没有绑定this，它们调用的都是本组件里的函数，即调用函数的this指向的是本组件 ...
React之jax语法
chd_sun的博客
03-22 425
一.什么是jax？ 概念：react定义的一种类似于xml的js拓展语法 作用：用来创建react的虚拟DOM对象的 二.jax基本语法 1.注释 <script type="text/babel"> let MyDom =<div> {/*注释方式*/} hello </div...
React 组件的三大核心属性之 state 在函数式组件中的基本使用
m0_50163856的博客
02-07 2014
使用Hook可以在函数式组件中使用state import React, {useState} from 'react' import {Button} from "antd"; export default function FuncCompDemo(props) { const initCount = 0; /** * @param 初值 * @return 数据和修改数据的function */ const [count, setCount]
connect-参数说明
weixin_45868552的博客
11-16 1665
1、mapStateToprops(state,ownProps) 类型：Function 这个函数允许我们将store中的数据作为props绑定到组件上 state : redux中的store ownProps : 自己的props 2、mapDispatchToProps(dispatch,ownProps) 类型：Function 将action作为props绑定到我们的函数中 dispatch : 就是store.dispatch() ownProps : 自己的props
6. React组件三大核心属性之state
人无远虑,必有近忧.
03-29 248
文章目录1. state作用2. state实例2.1 实例要求2.2 先写出静态页面3.实现切换功能4. 完整代码 1. state作用 存储数据 2. state实例 2.1 实例要求 实例：页面生成一个h2标题，并点击标题，切换内容显示 如 ： 今天天气很炎热，点击标题，让天气在炎热和凉爽之间切换 2.2 先写出静态页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
尚硅谷React实战项目踩坑记录
Crayon111的博客
07-19 1699
本次实战项目素材来自尚硅谷的React全展现全栈，项目内容是使用react + antd的方式开发后台管理系统，本文在这里记录一下开发时踩到的小坑以及解决方案，希望能对你有帮助！
react类组件和函数式组件的语法区别
04-21
React类组件和函数式组件的主要语法区别在于类组件需要继承React.Component类，并且需要实现render()方法来返回组件的JSX元素，而函数式组件只需要接收props参数并返回JSX即可。此外，在类组件中，state的初始值必须在构造函数中定义，并且需要通过this.setState()方法来改变state的值，而在函数式组件中可以使用useState钩子函数来定义和改变state的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值