React入门笔记

最新推荐文章于 2024-05-26 05:00:00 发布
最新推荐文章于 2024-05-26 05:00:00 发布
阅读量120 收藏 2
点赞数
分类专栏： 前端 文章标签： react javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenyeqv/article/details/113176581
版权

第一章  react基本使用

react基础首先不使用脚手架工具，只学习相关语法

Hello World输出

因为react是通过创建虚拟DOM，然后把虚拟DOM添加到DOM树中，以此达到控制视图的目的，所以首先使用react的时候需要先引入react相关文件和babel（把jsx转换成js）。

<!-- 容器 -->
    <div id="text"></div>
    
    <!-- 一定要带上babel，告诉编译器里面写的语法需要转换 -->
    <script type="text/babel">
        //创建 一个虚拟DOM
        const VDOM = <h1>Hello World</h1>
        //将虚拟DOM添加到DOM树上
        ReactDOM.render(VDOM,document.getElementById('text'));
    </script>

使用js创建 虚拟DOM

可以看到，要想使用jsx创建虚拟dom，需要引入babel文件，通过babel文件，将jsx转换成js，以此被编译器识别，事实上利用react文件，可以不使用jsx，直接创建 虚拟dom

<!-- 容器 -->
    <div id="text"></div>
    
    
    <script type="text/javascript">
        //创建 一个虚拟DOM
        const VDOM = React.createElement('h1',{id:'title'},'Hello React')
        //将虚拟DOM添加到DOM树上
        ReactDOM.render(VDOM,document.getElementById('text'));
    </script>

可以看到，用js创建虚拟dom要比用jsx麻烦的多，因此在日常的react学习中，通常 使用jsx来创建虚拟DOM

jsx语法规则

 <script type="text/babel">
        //创建 一个虚拟DOM
        let text = "Hello world"
        //根标签为h1
        const VDOM = <h1 className = "wrap"><span style={{fontSize:30}}>{text}</span></h1>
        //将虚拟DOM添加到DOM树上
        ReactDOM.render(VDOM,document.getElementById('text'));
    </script>
  • 定义虚拟dom就行写标签一样，不需要在外面在引号包裹
  • 标签中混入js表达式时要用{}包裹
  • 样式的类名不要用class，而应该用className
  • 内联样式要用{{}}包裹，外面一层{}表示jsx语法要用{}包裹，里面的{}指一个样式对象
  • 只有一个根标签，其余标签要包裹在根标签中
  • 标签闭合
  • 标签小写表示html自带标签，标签大写表示为自定义的react组件

jsx练习

因为jsx里面可以使用js表达式，因此可以在{}渲染数据

 <!-- 容器 -->
    <div id="text"></div>
    
    <!-- 一定要带上babel，告诉编译器里面写的语法需要转换 -->
    <script type="text/babel">
        let text = ['VUE','REACT','ANGULAR']
        //创建 一个虚拟DOM
        const VDOM = <h1><ul>{text.map((item,index)=>{
            return <li key={index}>{item}</li>
        })}</ul></h1>
        //将虚拟DOM添加到DOM树上
        ReactDOM.render(VDOM,document.getElementById('text'));
    </script>

函数式组件

组件可以被复用，把相同功能的模块封装成一个组件，那么就可以按需调用，节省时间和效率

<script type="text/babel">
        //创建函数式组件
        function Mycomponent(){
            return <h1>Hello React</h1>
        }
        //将虚拟DOM添加到DOM树上
        ReactDOM.render(<Mycomponent/>,document.getElementById('text'));
    </script>

类的复习

https://blog.csdn.net/wenyeqv/article/details/113180003

类式组件

  class Mycomponent extends React.Component {
            render() {
                return <h1>Hello World</h1>
            }
        }
        ReactDOM.render(<Mycomponent/>,document.getElementById('text'))

第二章 组件核心属性

1.state

state存储状态

state是组件从React中继承的属性，用来存放组件状态

class Mycomponent extends React.Component {
            constructor(props){
                super(props);
                this.state = {
                    isHot:true
                }
            }
            render(){
                return (
                    <h1>今天的天气很{this.state.isHot?"炎热":"凉爽"}</h1>
                )
            }
        }
        //将虚拟DOM添加到DOM树上
        ReactDOM.render(<Mycomponent/>,document.getElementById('text'));

state中的this指针问题

还是 上面的案例，如果想要修改state，首先需要获取到state,然后修改它的值，而state在Mycomponent实例中，用this获得，这里就需要时刻注意，每次使用的this，究竟是指什么

 class Mycomponent extends React.Component {
            constructor(props){
                super(props);
                this.state = {
                    isHot:true
                }
            }
            changeW(){
                console.log(this)
            }
            render(){
                return (
                    <h1 onClick={changeW}>今天的天气很{this.state.isHot?"炎热":"凉爽"}</h1>
                )
            }
        }
        //将虚拟DOM添加到DOM树上
        ReactDOM.render(<Mycomponent/>,document.getElementById('text'));

这里在类中创建一个方法，用来输出this，但是运行会报错，提示找不到changeW，原因是类中的函数将会被放在原型上，用来被类的实例来调用，如果直接写成onClick = { changeW },将会变成直接调用，此时全局没有changeW函数，所以会报错，因此render方法和constructor方法中的this都指向类的实例，所以改成onClick = { this.changeW } ,即可变成实例调用changeW，那么就可以在原型上找到这个函数了。

虽然这个函数可以调用了，但是输出的this却是undefine，这又是为什么呢？

原因很简单，还是那句话，只有类的实例调用类的函数，函数的this才指向类的实例，而这里的this肯定不是类的实例在调用。

我们可以用一个简单的例子来验证

  class Mycomponent extends React.Component {
            constructor(props){
                super(props);
                this.state = {
                    isHot:true
                }
            }
            changeW(){
                console.log(this)
            }
            render(){
                return (
                    <h1 onClick={this.changeW}>今天的天气很{this.state.isHot?"炎热":"凉爽"}</h1>
                )
            }
        }
        //将虚拟DOM添加到DOM树上
        ReactDOM.render(<Mycomponent/>,document.getElementById('text'));

        let m1 = new Mycomponent();
        m1.changeW();
        let x = m1.changeW;
        x();

我们自己来创建Mycomponent的实例 m1,用m1调用changeW，可以成功输出Mycomponent实例，而用x调用，却显示undefine

 

这就是关键所在

当实例调用类中的函数时，函数中的this指向实例，但是如果在全局声明一个x，将类中的函数的地址赋值给x，然后通过x()的方式 就可以调用类中的函数，这时已经不是通过实例在调用了，而是在全局调用，全局调用应该返回window，而此时又是在babel环境下，其严格遵守严格模式，严格模式下，全局的this为undefine

所以回到原来的代码中 onClick = { this.changeW},这里只是把changeW的地址给了onCLick事件，当onClick事件调用changeW的时候，已经不是实例调用changeW了

要想解决这个问题也很简单，其中一条思路就是利用bind()

 constructor(props){
                super(props);
                this.changeW = this.changeW.bind(this)
                this.state = {
                    isHot:true
                }
            }
            changeW(){
                console.log(this)
            }

在构造器中，实现这样一行代码：this.changeW = this.changeW.bind(this)

首先看等式右边，this.changeW肯定是在原型链上找到了changeW方法，然后bind(),bind()实现两件事：

  • 返回一个函数
  • 让函数的指向指向bind（）传进去的参数

这里bind（）传进去了this，所以整个右边的语句就是返回一个函数，函数的指向为constructor，也就是实例

而左边呢，左边则声明了一个属性，用来接受右边返回的函数。

这样，实例中有了一个changeW属性，实例原型上有了一个changeW方法，而在类组件中，跟具原型链查找规则，肯定是先使用changeW属性，所以最后组件执行的其实是实例的属性，这个属性指向一个方法，这个方法里面的指向为实例。

可以 通过这个方法验证：

   class Mycomponent extends React.Component {
            constructor(props){
                super(props);
                this.text = this.changeW.bind(this)
                this.state = {
                    isHot:true
                }
            }
            changeW(){
                console.log(this)
            }
            render(){
                return (
                    <h1 onClick={this.text}>今天的天气很{this.state.isHot?"炎热":"凉爽"}</h1>
                )
            }
        }
        //将虚拟DOM添加到DOM树上
        ReactDOM.render(<Mycomponent/>,document.getElementById('text'));

改成this.text = this.changeW.bind(this),组件中调用this.text，结果不变

state简写形式

  • 因为state属性继承自父类，说明实例中已经有state，只不过是null,所以可以直接赋值
  • 自定义的函数几乎全部为回调，不可能通过类的实例进行调用，因为React中只有组件，类的实例过程被隐藏，所以要通过bind()方法,这里可以改成回调函数。
 class Mycomponent extends React.Component{
            state = {
                isHot : true
            }
            changeW = () =>{
              let  {isHot} = this.state
              isHot = !isHot
                this.setState({
                    isHot:isHot
                })
            }
            render(){
                return(
                    <h1 onClick = {this.changeW}>今天天气很{this.state.isHot?"炎热":"凉爽"}</h1>
                )
            }
        }
        ReactDOM.render(<Mycomponent/>,document.getElementById('text'));

2.props基本使用

props主要应用于外部给组件传递参数

 class Mycomponent extends React.Component{
            render(){
               
                return (
                    <h1>
                        <ul>
                           <li>{this.props.name}</li>   
                           <li>{this.props.age}</li>   
                           <li>{this.props.sex}</li>   

                        </ul>    
                    </h1>
                )
            }
        } 
         let obj = {
             name:'张三',
            age:18,
            sex:'男'
         }
        ReactDOM.render(<Mycomponent {...obj}/>,document.getElementById('text'));

可以给props加入相关检验规则，限制传递的参数

  class Mycomponent extends React.Component{
            static propTypes = {
                name:PropTypes.string.isRequired,
                sex:PropTypes.string,
                age:PropTypes.number
            }
            static defaultProps = {
                sex:'男',
                age:18
            }
            render(){ 
               
                return (
                    <h1>
                        <ul>
                           <li>{this.props.name}</li>   
                           <li>{this.props.age}</li>   
                           <li>{this.props.sex}</li>   

                        </ul>    
                    </h1>
                )
            }
        } 
         let obj = {
             name:'张三',
            age:18,
            sex:'男'
         }
        ReactDOM.render(<Mycomponent {...obj}/>,document.getElementById('text'));

因为函数定义时可以 传递参数，因此函数组件也可以使用props

3. refs用来绑定标签

字符串形式ref

 class Mycomponent extends React.Component{
           showData = ()=>{
               console.log(this.refs)
           }
           render(){
               return(
                   <div>
                        <input ref="ipt1" type="text" />
                        <button onClick = {this.showData}>按钮</button>
                        <input ref="ipt2" type="text" />
                    </div>
               )
           }
       }
       ReactDOM.render(<Mycomponent/>,document.getElementById("text"))

回调形式的ref

在实例自身上挂在节点

内联函数在初次渲染的时候会在{}中执行一次，但是在更新过程会执行两次，第一次传入参数null，第二次 还是标签，原因是创建新的实例的时候会将上一次的ref挂载注销，所以会先null，而类绑定的函数方式则没有这种影响

<script type="text/babel">
       class Mycomponent extends React.Component{
           showData = ()=>{
               console.log(this)
           }
           render(){
               return(
                   <div>
                        <input ref= {c => this.inp1 = c}type="text" />
                        <button onClick = {this.showData}>按钮</button>
                        
                    </div>
               )
           }
       }
       ReactDOM.render(<Mycomponent/>,document.getElementById("text"))

    </script>

钩子函数创建ref

创建一个ref容器只能给一个节点用

  class Mycomponent extends React.Component{
           myRef = React.createRef()
           showData = ()=>{
               console.log(this.myRef)
           }
           render(){
               return(
                   <div>
                        <input ref = {this.myRef}type="text" />
                        <button onClick = {this.showData}>按钮</button>
                        
                    </div>
               )
           }
       }
       ReactDOM.render(<Mycomponent/>,document.getElementById("text"))

4. 高阶函数（函数柯里化）

  1. 高阶函数：将函数作为参数或者返回值的函数。
    1. 如：setInterval、Promis、array.map
  2. 函数柯里化:把接受多个参数的函数变为接受单个参数的函数，并且返回参数 的计算结果 
    const sum = (a) => {
    return (b)=>{
        return (c) => {
            return a+b+c;
        }
    }
}

console.log(sum(1)(2)(3));

     

  3. react中运用高阶函数的案例

 class Mycomponent extends React.Component {
            state = {
                name:'',
                password:''
            }
            show = (name) =>{
                return (e) =>{
                    this.setState({
                        [name]:e.target.value
                    })
                }
            }
            render(){
                return (
                    <form>
                        <div>
                        <label >name:</label>
                        <input  type="text" value={this.state.name} onChange={this.show('name')} / >
                        </div>
                        <div>
                        <label >password:</label>
                        <input type="text" value={this.state.password} onChange={this.show('password')} />
                        </div>    
                    </form>
                )
            }
        }
        ReactDOM.render(<Mycomponent/>,document.getElementById('text'));

不用柯里化的写法：

  class Mycomponent extends React.Component {
            state = {
                name:'',
                password:''
            }
            show = (name,e) =>{
                this.setState({
                    [name]:e.target.value
                })
            }
            render(){
                return (
                    <form>
                        <div>
                        <label >name:</label>
                        <input  type="text" value={this.state.name} onChange={(e)=>{this.show('name',e)}} / >
                        </div>
                        <div>
                        <label >password:</label>
                        <input type="text" value={this.state.password} onChange={(e)=>{
                            this.show('password',e)
                        }} />
                        </div>    
                    </form>
                )
            }
        }
        ReactDOM.render(<Mycomponent/>,document.getElementById('text'));

 

第三章 组件的生命周期

基本上旧版本的生命周期就按照上图所示，值得注意的是：

  1. shouldComponentUpdata 默认返回true
  2. componentWillReceiveProps在子组件第一次挂在接受props不会调用，在后续传入新的props是才调用

 

新的生命周期和旧的生命周期相比，废除了三个钩子，新加了两个钩子。

 

问也去
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react入门实战项目-类印象笔记应用源码
08-11
本篇，将记录如何使用React实现一个简版的印象笔记App的入门实例，本实例也比较好实现，但内容相对于上个Demo更加丰富，用到了许多新的知识点，都是非常实用，必须掌握的一些内容,本菜鸟自己实践了一遍，收益非常多...
react笔记（入门专用）
07-17
react新手入门笔记
React--Component组件浅析
江拥羡橙的博客
06-06 2941
在 React 世界里，一切皆组件，我们写的 React 项目全部起源于组件。组件可以分为两类，一类是类（ Class ）组件，一类是函数（ Function ）组件。本章节，我们将一起探讨 React 中类组件和函数组件的定义，不同组件的通信方式，以及常规组件的强化方式，帮助你全方位认识 React 组件，从而对 React 的底层逻辑有进一步的理解。想要理解 React 组件是什么？我们首先要来分析一下组件和常规的函数和类到底有什么本质的区别。/* 类 */ class textClass {
React
qq_51274370的博客
12-12 443
React万字详细笔记
React.createClass 和 extends React.Component
cao_dan的博客
08-01 2599
常用extends React.Component ，以下是一些二者区别： 1.初始化state时候的区别  用createClass创建的组件需要使用函数getInitialState()函数如： import React from 'react'; const Person= React.createClass({ getInitialState () { return ...
react 入门-创建组件（1）继承component法
王洪伟的专栏
12-13 3908
React 组件(Component) 也是一种元素Element,只不过是粒度更大一些的、包含更多子元素。通过React组件，把一些相关的元素组织起来，形成可以复用的、有多个成员的元素的组合。举例
转载 React.createClass 对决 extends React.Component
weixin_34096182的博客
01-18 163
先给出结论，这其实是殊途同归的两种方式。过去我们一般都会使用React.createClass方法来创建组件，但基于 ES6 的小小语法糖，我们还可以通过extends React.Component来创建组件。 这两种创建方式之间的差别很小，但只有了解这些颇有趣味的区别之后，我们才能做出最适合自己的选择。 语法区别 首先，让我们通过两个代码片段和相应的解释来看看到底有哪些语法区别。...
react教学笔记，从入门到精通
06-06
react教学笔记，从入门到精通
React笔记
02-24
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm ...
React:一个入门 React 的学习笔记
05-14
这个仓库用于记录我的react使用笔记，以及和大家分享。 react环境搭建 如果不想这么麻烦可以使用。 前言 react不像jquery一样能通过src直接使用它需要一系列的辅助工具的支持，我们在学习react之前需要初步了解 ...
React创建组件的两种方式
hyupeng1006的博客
03-20 414
1 通过 JS函数 创建（无状态组件） 2 通过 class 创建（有状态组件） 函数式组件 和 class 组件的使用场景说明： 1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件 2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state JavaScript函数创建 注意：1 函数名称必须为大写字母开头，React...
在React中使用extends React.Component定义的组件
Stan的专栏
11-22 7672
在《React 快速上手开发》的第二章，组件的生命周期，创建组件的API是这么写的：var MyComponent = React.createClass({ render:function(){ return (<h1> hello world </h1>) } }); ReactDOM.render( React.createElement(MyCompo
谈一谈创建React Component的几种方式
weixin_34102807的博客
02-19 321
当我们谈起React的时候，多半会将注意力集中在组件之上，思考如何将页面划分成一个个组件，以及如何编写可复用的组件。但对于接触React不久，还没有真正用它做一个完整项目的人来说，理解如何创建一个组件也并不那么简单。在最开始的时候我以为创建组件只需要调用createClass这个api就可以了；但学习了ES6的语法后，又知道了可以利用继承...
react创建脚手架以及定义组件的方式
在路上`的博客
11-24 990
一、搭建脚手架（准备条件） node -v 需要16以上版本 npm -v 需要6以上版本 npm i -g create-react-app create-react-app helo-react 二、类组件的应用 class App extends React.Component { constructor(props) { super(props); this.state = { isNewDialog: false, iscloseDialog: fa
通过继承React.Component创建React组件-5
最新发布
编程是一门实践技术
05-26 784
在React中，V16版本之前有三种方式创建组件（~~`createClass()`~~ 被删除了)，之后只有两种方式创建组件。这两种方式的组件创建方式效果基本相同，但还是有一些区别,类创建方式
创建React组件之属性及组件传值
self_challenge的博客
12-22 433
React入门必备基本知识 一、创建类式组件 import React, { Component } from 'react' //引入 React export default class extends React.Component{ //继承 React 的 Component constructor(props){ //构造器 //在class方法中，继承是使用 extends 关...
【react框架】一次性讲明白各个组件概念（类式组件与函数式组件、受控组件与非受控组件、简单组件与复杂组件、高阶组件）
庞囧的博客
07-24 363
在react中书写的组件主要有两种方式，类式组件与函数式组件。我是这么理解的，非受控是数据发现变化后需要人为去触发组件事件，组件才去处理数据；第一、每个类组件都是继承了React.Component的子类，这样子类也就拥有父类的很多属性或者说是api，例如钩子函数。//render中的this是谁？一、可以看到类组件和函数组件最终都是要执行render函数，后面走的流程是一样的。//此处的this是undefined，因为babel编译后开启了严格模式。学习类式组件的前提知识点，建议看看我写的一个文章。
【React】React 详细教程
NAMECZ的博客
02-10 3876
前言 1、react与vue的对比 1.1、什么是模块化 是从代码的角度来进行分析的 把一些可复用的代码抽离为单独的模块；便于项目的维护和开发 1.2、什么是组件化 是从UI界面角度来进行分析的 把一些可复用的UI元素抽离为单独的组件 1.3、组件化的好处 随着项目规模的增大，手里的组件就越来越多； 很方便就能把现有的组件拼接为一个完整的页面 1.4、vue中是如何实现组件化的 通过.vue文件来创建对应的组件 template 结构 script 行为 style
React.createClass 对比 extends React.Component
weixin_30421525的博客
04-20 129
今天在写代码的时候，突然想到这个问题，于是找了一篇文章，文章地址：https://toddmotto.com/react-create-class-versus-component/以下是翻译，如果有不对的地方，欢迎指正。 大多数情况下，可以认为是实现同一个功能的两种方法。React提供了React.createClass方法来创建组件类, 并发布了一个语法糖更新，通过扩展React.Compo...
react入门
05-26
下面是一个简单的 React 入门指南： 1. 安装 React React 可以通过 NPM 安装，可以在命令行中执行以下命令来安装 React： ``` npm install react react-dom ``` 2. 创建 React 组件 在 React 中，一个组件就是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

问也去

创作不易，感谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值