快速上手React(中)

最新推荐文章于 2023-06-16 15:15:59 发布
最新推荐文章于 2023-06-16 15:15:59 发布
阅读量227 收藏 1
点赞数 1
分类专栏： 前端 React 文章标签： 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47886687/article/details/111145468
版权
前端 同时被 2 个专栏收录
122 篇文章 6 订阅
订阅专栏
React
9 篇文章 0 订阅
订阅专栏

0.箭头函数绑定this

//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    // 方法一
    handelClick() {
        console.log(this);
    }
    // 方法二（推荐写法）
    // handelClick = () => {
    //     console.log(this);
    // }
    render() {
        // 方法一:包裹一层 箭头函数的方式 （不太推荐）
        return (<button onClick={() => this.handelClick()}>按钮</button>)
        // 方法二:类实例箭头函数的方式（推荐写法）
        // return (<button onClick={this.handelClick}>按钮</button>)
        // 方法三:调用的时候用bind绑定this （传参的时候使用）
        // return (<button onClick={this.handelClick.bind(this)}>按钮</button>)
    }
}

//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))

1.call apply bind 区别和用法

  • 功能都是操作不同对象
  • apply需要用数组包裹参数
  • bind返回新函数需要自调用
<script>
        let obj = {
            name: '山竹',
            say(value, value2) {
                console.log(this.name, value, value2);
            }
        }
        let newName = { name: '杀生丸' }
        // call()
        obj.say.call(newName, '超级帅der')//杀生丸 超级帅der undefined
        // apply()
        obj.say.apply(newName, ['超级帅der'])//杀生丸 超级帅der undefined
        // bind()
        obj.say.bind(newName, '超级帅der')('只有bind才显示value2')//杀生丸 超级帅der 只有bind才显示value2
    </script>

2.受控表单实现

  1. 声明state
  2. 绑定state中的值 给表单
  3. 监听表单值改变 并且更新到state当中
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    // 声明state
    state = {
        isValue: '',
        ispwd: ''
    }
    // 2.监听触发事件,获取input事件
    handelChange = (e) => {
        // 结构name
        const { name } = e.target
        console.log(e);
        //获取的name更新给声明的state
        this.setState({
            [name]: e.target.value
        })
    }
    // 点击按钮
    handelClick = (e) => {
        console.log(e)
    }
    render() {
        return (
            <div>
                {/* 1.触发事件 3.接收到更新的state赋值给input中的value*/}
                <div>
                    账户名:
                <input onChange={this.handelChange} value={this.state.isValue}
                        type='text'
                        name='isValue'
                    />
                </div>
                <div>
                    密码:
                 <input onChange={this.handelChange} value={this.state.isPwd}
                        type='pwd'
                        name='ispwd'
                    />
                </div>
            </div>)
    }
}

//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))

3.非受控表单实现

  1. 创建Ref引用
  2. 绑定Ref引用到表单元素
  3. 通过引用拿到具体的表单元素以及值
  4. defaultValue默认值设定
//src/index.js
// 1.引入模块
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    //    1.创建Ref引用
    constructor() {
        super()
        //创建引用,引用命名一Ref结尾
        //React.createRef()是一个工厂设计模式
        this.usernameRef = React.createRef()
        this.pwdRef = React.createRef()
    }
    // 3.通过引用拿到具体的表单元素以及值
    handelClick = () => {
        console.log(this.usernameRef.current.value, this.pwdRef.current.value);
    }
    //设定state
    state = { username: '山竹' }
    render() {
        return (
            <div>
                {/* 2.绑定Ref引用到表单元素 */}
                {/* 4.defaultValue默认值设定 */}
                <div>
                    账户名:
                <input defaultValue={this.state.username} type='text' ref={this.usernameRef} />
                </div>
                <div>
                    密码:
                 <input type='pwd' ref={this.pwdRef} />
                </div>
                <button onClick={this.handelClick}>按钮</button>
            </div>)
    }
}

//3.将创建好的类组件挂载到dom上
ReactDOM.render(<App />, document.getElementById('root'))

4.表单总结

  1. 表单值处理推荐使用受控表单的模式,因为拿值比较方便
  2. 非受控表单主要用于需要操作DOM的时候,比如:video canvas 或者动画等待
  3. 受控表单最后拿值可以直接到state当中去拿,非受控拿值 需要通过引用挨个取值

5.组件传值父传子

this.props接收父组件传递的值

//src/index.js
// 1.引入模块
import React, { Component } from 'react'
import ReactDOM from 'react-dom'


class Father extends Component {
    state = {
        num: 18
    }
    render() {
        return (
            <div style={{ background: 'red' }}>
                我是父组件
                <Son num={this.state.num} />
                {/* 引入子组件 */}
            </div>
        )
    }
}

class Son extends Component {
    render() {
        return (
            // 通过this.props接收
            <div style={{ background: 'pink', margin: 10 }}>
                我是子组件,从父组件传递过来的值是{this.props.num}
            </div>
        )
    }
}

//3.将创建好的类组件挂载到dom上
ReactDOM.render(<Father />, document.getElementById('root'))

在这里插入图片描述

6.组建传值子传父

  1. 父组件定义一个方法
  2. 父组件在使用子组件的地方 通过组件传值 传方法给子组件
  3. 子组件拿到父组件传过来的方法 调用该方法同时传实参给方法
  4. 父组件方法中通过形参难道子组件传来的数据 更新到state当中
//src/index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Father extends Component {
    state = {
        num: ''
    }
    // 4.监听子组件事件
    // 需要用箭头函数改变this指向,否则指向调用者--子组件
    receiveNum = (props) => {
        console.log(props);
        // 5.保存子组件的值
        this.setState({
            num: props
        })
    }
    render() {
        return (
            <div style={{ background: 'red' }}>
                我是父组件,从子组件传递过来的值是:{this.state.num}
                {/* 3.监听子组件传递过来的事件 */}
                <Son onReceive={this.receiveNum} />
            </div>
        )
    }
}

class Son extends Component {
    state = {
        num: 18
    }
    // 2.传递给父组件
    handelClick = () => {
        this.props.onReceive(this.state.num)
    }
    render() {
        return (
            <div style={{ background: 'pink', margin: 10 }}>
                我是子组件
                {/* 1.触发子传父事件 */}
                <button onClick={this.handelClick}>按钮</button>
            </div>
        )
    }
}

ReactDOM.render(<Father />, document.getElementById('root'))

在这里插入图片描述

7.兄弟传值

子传父再父传子

在这里插入图片描述

//src/index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Father extends Component {
    state = {
        num: ''
    }
    // 4.监听子组件事件
    // 需要用箭头函数改变this指向,否则指向调用者--子组件
    receiveNum = (props) => {
        console.log(props);
        // 5.保存子组件的值
        this.setState({
            num: props
        })
    }
    render() {
        return (
            <div style={{ background: 'red' }}>
                我是父组件,从子组件传递过来的值是:{this.state.num}
                {/* 3.监听子组件传递过来的事件 */}
                {/* 第一个子组件 */}
                <Son onReceive={this.receiveNum} />
                {/* 第二个子组件 */}
                {/* 6.传递给第二个子组件,形成兄弟传值 */}
                <Sony num={this.state.num} />
            </div>
        )
    }
}

class Son extends Component {
    state = {
        num: 18
    }
    // 2.传递给父组件
    handelClick = () => {
        this.props.onReceive(this.state.num)
    }
    render() {
        return (
            <div style={{ background: 'pink', margin: 10 }}>
                我是子组件
                {/* 1.触发子传父事件 */}
                <button onClick={this.handelClick}>按钮</button>
            </div>
        )
    }
}

class Sony extends Component {
    render() {
        return (
            <div style={{ background: 'yellow', margin: 10 }}>
                {/* 7.接收父组件的值,形成兄弟传值 */}
                我是第二个子组件,从父组件接收的值是{this.props.num}
            </div>
        )
    }
}

ReactDOM.render(<Father />, document.getElementById('root'))

在这里插入图片描述

8.Context 跨组件层级传值

  1. 创建Provider和Consumer组件
  2. 使用Procider传递值
  3. 使用Consumer接收跨组件值
import React from 'react';
import ReactDOM from 'react-dom';

// 引入样式
import './index.css';

// 1.创建Provider和Consumer组件
const { Provider, Consumer } = React.createContext()

class App extends React.Component {
    state = {
        txt: '传家宝'
    }
    render() {
        return (
            // 2.使用Procider传递值
            <Provider value={this.state.txt}>
                <div className="app  container">
                    <Node />
                </div>
            </Provider>
        )
    }
}

const Node = props => {
    return (
        <div className="node">
            <SubNode />
        </div>
    )
}

const SubNode = props => {
    return (
        <div className="subnode">
            <Child />
        </div>
    )
}

const Child = props => {
    return (
        <div className="child">
            {/* 3.使用Consumer接收跨组件值 */}
            我是曾孙子节点 --
            <Consumer>
                {(data) => {
                    return data
                }}
            </Consumer>

        </div>
    )
}



ReactDOM.render(<App />, document.getElementById('root'));

在这里插入图片描述
样式参考

/* index.css */
.container {
    text-align: center;
    margin: 0 auto;
}


.btn {
    width: 200px;
    height: 100px;
    border-radius: 50px;
    background-color: aquamarine;
}

span {
    margin: 10px;
}



.app {
    width: 300px;
    padding: 10px;
    border: 1px solid #999;
}

.user {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.content {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.no-comment {
    text-align: center;
    margin-top: 30px;
}


.app {
    height: 100px;
    padding: 10px;
    background-color: #c4d0dc;
}

.node {
    height: 80px;
    padding: 10px;
    background-color: yellowgreen;
}

.subnode {
    height: 60px;
    padding: 10px;
    background-color: #dcdc39;
}

.child {
    height: 40px;
    padding: 10px;
    background-color: skyblue;
}

9.props之children的用法

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// 引入图片
import img from './image/5.jpg'
// 方法一:函数式
// class App extends Component {
//     render() {
//         return (
//             <div>
//                 {this.props.children()}
//             </div>
//         )
//     }
// }
// 方法二
class App extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
}

//方法一
// ReactDOM.render(<App>{() => {
//     return <img src={img} />
// }}</App>, document.getElementById('root'));

// 方法二
ReactDOM.render(<App><img src={img} />
</App>, document.getElementById('root'));

效果
在这里插入图片描述

山竹回家了
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 超详细入门教程
m0_60970928的博客
03-27 9950
React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，但可以使用 React 作为 MVC 架构的 View 层轻易的在已有项目中使用，它是一个用于构建用户界面的 JavaScript 库，起源于 Facebook 的内部项目，用来架设 Instagram 的网站，于 2013 年 5 月开源。React 是用于动态构建用户界面的 JavaScript 库(只关注于视图)。
一个星期初步了解学习react的心得
Fancyzhe
11-27 1万+
作为一个实习生，刚刚入职公司。工作需要，在快速的熟悉公司的项目和开发流程，于是在一个星期恶补了react。 最开始看的还是阮老师最经典易懂的教程         React 入门实例教程 对着这13个demo，原封不动敲了一遍，还是不能懂为什么要用react。只是一直在重复强调一个概念“组件化”，也没有真正去弄懂模块化和组件化的区别在哪儿。现在大概能背出来概念，组件化是U
react快速开始(一)-入门基础
热门推荐
西京刀客
10-09 1万+
react快速开始-入门基础 在前端框架框架方面，其中的佼佼者React和AngularJS均出名门公司，具有非凡的影响力和号召力。尤其是React，它定位于前端组件化、高性能和跨平台，它提出的基于虚拟DOM的理念一出现就获得了广泛的关注和认可，也被AngularJS等其他前端框架所引入。
React快速上手Ant Design模板
最新发布
qq_70703397的博客
06-16 1269
Ant Design是一个流行的React UI组件库，提供了丰富的可复用组件来构建现代化的Web应用程序。通过按照以上步骤，您已经成功地快速上手了在React中使用Ant Design模板构建应用程序的基本结构。现在，您可以在React组件中使用Ant Design提供的各种UI组件。，看到您的React应用程序已经成功启动并显示了Ant Design的组件。这将确保您的应用程序正确地加载并应用了Ant Design的样式。的新文件夹，并自动安装所有必要的依赖项。步骤 4：使用Ant Design组件。
10天学完React——01、react概述和脚手架使用
weixin_47065927的博客
08-05 732
如何高效，快捷，方便的把服务器后端丢过来的数据，丰富的展现在界面上。不管是老早的jQuery, 到现在的Vue, React, 以及Argular, 都是如此，框架和框架的差异，无非是设计思想不一样，组件不一样，数据流动不一样，但本质没变。react在2013年被facebook开源，之后这门前端语言的发展就一直很迅猛，很多的统计数据表明，在所有的前端语言当中，React的市场占有率是排在第一的位置的。虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。.....
React快速上手开发
02-13
React快速上手开发
react-ts-end:快速上手React+TypeScript+Redux技术栈
05-16
快速上手React+TypeScript+Redux技术栈 2018年的六一儿童节已到，特此一篇来献给小盆友们。此处应该有掌声.... 写在前面: 首先，什么是TypeScript？ 官方原话:TypeScript is a typed superset of JavaScript that ...
React 快速上手
qq_44577070的博客
10-18 721
有写 React 的需求，学习时做的笔记。
React如何快速上手
Y974066017的博客
03-25 1365
React 从0到1的过程，持续更新，一起进步。
初识 react 一分钟上手
twinkle的博客
02-05 526
React 特点 1.声明式设计 −React采用声明范式，可以轻松描述应用。 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 6.单向响应的数据流 − React 实现了单向响...
[react] 你觉得react上手快不快？它有哪些限制？
歌谣的博客
11-30 429
[react] 你觉得react上手快不快？它有哪些限制？ 相对vue来说不快。 限制 需要学习JSX 需要工程化的配置 需要对原生JavaScript有相当的掌握 react只是一个UI层面的库，像vue内置了动画处理、keep-alive等功能，react则需要去找第三方库解决 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
React快速上手
Housz的博客
04-07 1343
通过create-react-app工具快速构建React项目，初步了解React工作机制。1. 环境配置忽略React的技术栈细节，使用create-react-app构建应用。 开发环境：node和npm(或cnpm)安装create-react-app：cnpm install -g create-react-app在工作目录下执行下列命令建立应用：create-react-app myap
React完整上手攻略（转）
东子的博客
01-09 808
转自https://typescript.bootcss.com/tutorials/react.html 这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后，你将学到： 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试，以及 使用Redux管理状态 我们会使用create-react-app工...
最简单的React Hooks入门级教程，5分钟即可上手
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-15 981
作者：西门吹喵https://juejin.im/post/5e53d9116fb9a07c9070da44学习总结！从三个纬度学习记录：为什么????️怎么用????知识点⛽️useS...
java开发工程师如何快速上手React前端框架，亲身实践
小糖豆
07-06 812
111
React之快速开始（一）
NeverSayNever
05-21 954
1、react是JavaScript的库2、 JSX 是 JavaScrip 的一种扩展语法3、ES6也是JavaScript语法4、react中用JSX语法5、
React 快速入门
FareBlog
01-21 4924
本文采用 es6 语法，完全参考 https://reactjs.org/docs/ 本文完全参考 React 官方 Quick Start 部分，除了最后的 thinking-in-react 小节 安装 首先你需要点击安装 nodejs（npm）。然后执行： npm install -g create-react-app 如果上述命令执行失败可以运行以下命令： npm
让我难忘的前端框架-React
风华绝代
01-14 2707
在alibaba的实习项目sm_fetcher中，前端框架我用到了React，我觉得这是一个很有必要去学习的一个框架。那仫它的神奇之处在哪里呢？下面就让我来揭秘吧~~~ 1、什仫什React？ React是一个用于构建用户界面的Javascript库，但是React并不是一套完整的MVC或者是MVM的框架，它仅仅涵盖V–>view视图层。React所做的事情主要就是对表单元素做了专门的优化处理
快速上手react
文摘资讯
04-25 205
如何使用react安装node确保npm版本在5.2之后才可以使用npx命令，通过npm -v检查版本是否正确npx create-react-app my-appcd ...
react框架快速上手
03-04
以下是一些 React 开发的快速上手指南： 1. 确保你已经掌握了基本的 HTML、CSS 和 JavaScript 知识。 2. 在学习 React 之前，建议先掌握 ES6 语法和模块化编程的基础知识。 3. 了解 React 的基本概念，如组件、虚拟...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值