React学习笔记

最新推荐文章于 2024-05-21 19:50:21 发布
最新推荐文章于 2024-05-21 19:50:21 发布
阅读量72 收藏
点赞数
分类专栏： 学无止境 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jibinghao/article/details/120323713
版权

React学习笔记

文章目录

一、引入react相关文件

	//这里的顺序不能乱
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

二、虚拟DOM的使用方式

第一种使用jsx方式

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        //1.创建虚拟dom
    const VDOM = <h1 id='title'><span>Hello React</span></h1> 
    //2.渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>

第二种使用原生DOM

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- <script type="text/javascript" src="../js/babel.min.js"></script> -->
    <script type="text/javascript">
        //1.创建虚拟dom
    const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello React'))
    //2.渲染虚拟dom到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>

三、jsx语法规则

  1. 定义虚拟DOM，不要加引号
  2. 标签中混入JS表达式要用{}
  3. 样式的类名不要用class，要用className
  4. 内联样式，要用style={{key:value}}的形式来写
  5. 只有一个根标签
  6. 标签必须闭合
  7. 标签首字母。
    （1）若小写字母开头，则将该标签转为html同名元素；
    （2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

四、组件三大属性state

  • 较复杂的写法
  <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">

        class Weather extends React.Component {
            constructor(props) {
                super(props)
                this.state = { isHot: true }
                this.changeWeather = this.changeWeather.bind(this)
            }
            render() {
                console.log(this)
                return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
            }
            changeWeather() {
                const isHot = this.state.isHot
                this.setState({isHot : !isHot})

            }
        }
        ReactDOM.render(<Weather />, document.getElementById('test'))
    </script>
  • 简写
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">

        class Weather extends React.Component {
            constructor(props) {
                super(props)
            }
            state = { isHot: true }
            render() {
                console.log(this)
                return <h1 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
            }
            changeWeather = () => {
                const isHot = this.state.isHot
                this.setState({ isHot: !isHot })
            }
        }
        ReactDOM.render(<Weather />, document.getElementById('test'))
    </script>
</body>

五、组件三大属性props

  • 简单的使用
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Person extends React.Component {
            render() {

                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                )

            }
        }
        const man = { name: "小纪", sex: "男", age: 18 }
        ReactDOM.render(<Person {...man} />, document.getElementById('test'))
    </script>
</body>
  • 加上限制规则
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Person extends React.Component {
            render() {

                return (
                    <ul>
                        <li>姓名：{this.props.name}</li>
                        <li>性别：{this.props.sex}</li>
                        <li>年龄：{this.props.age}</li>
                    </ul>
                )

            }
        }
        //限制条件 string字符串 number数字 func函数 isRequired必须填
        Person.propTypes = {
            name: PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number,
            speak:ProTypes.func
        }
        //默认值
        Person.defaultProps = {
            sex: '女',
            age: 18
        }
        const man = { name: '111' }
        ReactDOM.render(<Person {...man} />, document.getElementById('test'))
    </script>
</body>

六、组件三大属性rerfs

  1. 写法一（不推荐）
    直接使用ref=""，但是有bug，官方不推荐了
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            showData = () => {
                const input1 = this.refs.input1.value
                alert(input1)
            }
            showData2 = () => {
            }
            render() {
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData} >点我提示左侧的数据</button>&nbsp;
                        <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                    </div>)
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>
  1. 使用回调形式
<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            showData = () => {
                const { input1 } = this
                console.log(input1.value)
            }
            showData2 = () => {
                alert(this.input2.value)
            }
            render() {
                return (
                    <div>
                        <input ref={c => this.input1 = c} placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData} >点我提示左侧的数据</button>&nbsp;
                        <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
                    </div>)
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>
jibinghao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 学习笔记
11-16
react 学习笔记， 自己学习过程中记录的内容。react component 生命周期，整合eslint插件
React学习笔记之条件渲染（一）
01-19
在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。下面就来看看详细的介绍： 条件渲染 可以根据state的值进行组件的条件渲染。例如： function ...
React 学习笔记
weixin_41184962的博客
04-25 4297
1. react- 用于构建用户界面的javaScript 库react 是一个将数据渲染微HTML视图的开源 JavaScript库2. facebook开发，且开源3. 原生JavaScript 原生javaScript操作DOM繁琐、效率低（DOM-APL 操作 UI)。 使用javascript直接操作DOM,浏览器会进行大量的重绘重排。 原生JavaScript没有组件化编码方案，代码复用率低。4. react 特点 react 核心库和re
react学习笔记
热门推荐
冷月心的博客
06-22 1万+
react学习笔记
React学习笔记(基础篇)
m0_54088427的博客
03-30 1898
React学习笔记(基础) 1.React介绍 ​ react由facebook公司推出，因为该公司不满足于市面上现有的前端框架，他们认为MVC只会让前端越来越复杂，因此react就诞生了，react只关注与视图层，官方对react的定位是：一个快速构建前端视图的javaScript库。 2.React的特点 虚拟DOM ​ 如果没有虚拟DOM，每次DOM改变的时候，都需要在浏览器中进行渲染。每一次DOM改变的时候，浏览器都需要重新计算CSS，进行布局处理，然后重新渲染页面，这都需要时间
react学习笔记（完整版 7万字超详细）
qq_51986661的博客
02-09 3171
React学习笔记，适合刚开始或者对react有一定理解的更快的学习react
React学习笔记之高阶组件应用
01-19
是什么 高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。...class Hello extends React.Component { // } 如何实现 属性代理 下面的例子是最简单的一个实现 function hoc(Impo
react.js.md react学习笔记
03-21
react.js.md react学习笔记
React学习笔记之事件处理（二）
12-09
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...
react组件传参 父传子可以传字符串，布尔值，数组，对象，jsx，
最新发布
qq_65537235的博客
05-21 59
在react中，父传子组件 props的灵活性是很强大的，可以传字符串，布尔值，数组，对象，jsx，
react18【系列实用教程】useCallback —— 缓存函数 （2024最新版）
朝阳39的博客
05-15 159
当父组件向子组件传递了函数，也会引发 memo 缓存组件失效，因为函数也是引用类型的数据，父组件重新渲染时，传给子组件的函数的内存地址也会重新生成，引发子组件重新渲染。
React 第三十七章 Scheduler 最小堆算法
aXin_li的博客
05-16 944
在 Scheduler 中，使用最小堆的数据结构在对任务进行排序。我们在学习 Scheduler 中最小堆算法之前，需要先了解什么是 二叉堆。
react 保持组件纯粹
阿乐的博客
05-21 252
部分 JavaScript 函数是的，这类函数通常被称为纯函数。纯函数仅执行计算操作，不做其他操作。你可以通过将组件按纯函数严格编写，以避免一些随着代码库的增长而出现的、令人困扰的 bug 以及不可预测的行为。但为了获得这些好处，你需要遵循一些规则。
「React」useEffect 与 useLayoutEffect 使用与区别
Constantiny的博客
05-17 632
useEffect 与 useLayoutEffect 是两个 Hooks，前者比较常用，后者在一些场景下也会用到，下面说明两者区别和应用场景。
Django5+React18前后端分离开发实战03 理解Django项目结构
Python私教
05-18 1018
让我们看看创建的项目文件。使用代码编辑器打开backend项目。我会在这本书中使用vscode编辑器。
React类组件生命周期详解
weixin_47342624的博客
05-21 565
它使你的组件能够在 DOM 发生更改之前捕获一些信息（例如滚动的位置）。方法，那么 React 会在你的组件更新了 props 或 state 重新渲染后立即调用它。方法，会造成触发一次发生在浏览器更新屏幕内容之前的额外渲染，在这种情况下，即使。返回值：返回你想要的任何类型的快照值，或者是。方法，React 会在你的组件被移除屏幕（进行比较来确定发生了什么改变。进行比较来确定发生了什么改变。：更新之前的 props。：更新之前的 state。：更新之前的 Props。：更新之前的 State。
React 中的组件提升和 Context 的使用方式
hawk2014bj的博客
05-18 253
在项目的开发中，何时使用状态提升，何时使用上下文，我们需要根据具体需求，以及组件的复杂性。当只有少数几个组件需要访问状态，并且这些组件关系密切（如父子或兄弟组件）时使用。保持数据流简单和明确，使得追踪和调试数据流通过组件的方式更加容易。状态提升的好处是简单、方便，但是需要层层传递，如果结构复杂就显得比较混乱。对应使用上下文，可以应用在以下几种场景当状态需要被应用内不同层级的许多组件访问时。用于可以被视为“全局”的数据，如主题、用户设置、身份验证数据等。
react18【系列实用教程】memo —— 缓存组件 （2024最新版）
朝阳39的博客
05-15 337
将需要缓存的组件作为 memo 函数的参数传入，并将 memo 函数的返回值对外导出即可。
黑马react学习笔记
09-14
黑马React学习笔记主要包括React组件生命周期和整合ESLint插件的内容。在学习React时，我们首先需要导入React和ReactDOM两个包，并且使用ReactDOM.render()方法将React元素渲染到页面中。在渲染过程中，我们可以使用各种React组件生命周期方法来控制组件的行为。同时，整合ESLint插件可以帮助我们在开发过程中规范代码风格和提高代码质量。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值