AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

React框架第九课 React基础第三课

2023-07-16 91
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： React框架第九课 React基础第三课

 

import React, { Component } from 'react'
export default class App extends Component {
    a = 200
    myRef = React.createRef()
    render() {
        return (
            <div>
                <input ref={this.myRef}/>
                {/* <input ref="mytest2"/> */}
                <button onClick={() => {
                    // 标签自身
                    // console.log("CLICK", this.refs.mytest.value)
                    console.log("click",this.myRef)
                    console.log("click",this.myRef.current)
                    console.log("click",this.myRef.current.value)
                }}>增加按钮1</button>
            </div>
        )
    }
}
// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有
//一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
// import App from './App';
import React from'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中
//引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语
//法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSXJavaScript XML。
// import App from'./01-base/01-class组件'
// import App from'./01-base/02-函数式组件'
// import App from'./01-base/03组件套娃'
// import App from'./01-base/05-事件绑定'
import App from'./01-base/06-事件绑定2'
// import App from './01-base/07Ref'
// import App from './01-base/08state'
// import App from './01-base/09数组循环'
ReactDOM.render(
    // <div>
    // <b><h1>ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上</h1></b>
    // <h2>JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面</h2>
    // </div>
    // React.createElement("div",{
    //     id:"aaaa",
    //     class:"bbbbb"
    // },"我是第二种方案")
    // <div>11111</div>
    <App></App>
    ,
    document.getElementById("root")
    )
//JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面
    /**
     * jsx=js+xml
     */

import React, { Component } from 'react'
/**
 * this.state 是纯js对象,在vue中，data属性是利用 Object.defineProperty 处理过的，更改 data的
数据的时候会触发数据的 getter 和 setter ，但是React中没有做这样的处理，如果直接更改的话，
react是无法得知的，所以，需要使用特殊的更改状态的方法 setState 。
 */
export default class App extends Component {
    // state = {
    //     mytext: "收藏",
    //     myshow: true
    // }
    // 第二种方案
    constructor() {
            super()
            this.state = {
            name: 'React',
            myshow: true,
            myname:"AAAA"
          }
        }
    render() {
        // let text="取消收藏"
        return (
            <div>
                <h1>欢迎来到Reac Stater---{this.state.myname}</h1>
                <button onClick={() => {
                    //   this.state.mytext="取消"
                    this.setState({
                        // mytext:"取消收藏"
                        myshow: !this.state.myshow,
                        myname:"BBBBB"
                    })
                    if (this.state.myshow===true) {
                        console.log("收藏")
                    } else {
                        console.log("取消收藏")
                    }
                    // 间接修改
                }}>{this.state.myshow ? '收藏' : "取消收藏"}</button>
            </div>
        )
    }
}
import React, { Component } from 'react'
export default class APP extends Component {
    state={
        list:["A11111","B11111","C11111","D11111","E11111","F11111","G11111","H11111","I11111","J11111"]
    }
  render() {
    return (
      <div>
      <ul>
        {
            this.state.list.map(item=>
                <li>{item}</li> 
                )
        }
      </ul>
      </div>
    )
  }
}
/**
 * 原生JSmap集合
 */
var list= ["A11111","B11111","C11111","D11111","E11111","F11111","G11111","H11111","I11111","J11111"]
// eslint-disable-next-line no-template-curly-in-string
var newList=list.map(item=>'<li>${item}<li/>')
console.log(newList.join(""))

// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有
//一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React
// import App from './App';
import React from'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中
//引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'
// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
// 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语
//法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSXJavaScript XML。
// import App from'./01-base/01-class组件'
// import App from'./01-base/02-函数式组件'
// import App from'./01-base/03组件套娃'
// import App from'./01-base/05-事件绑定'
import App from'./01-base/06-事件绑定2'
// import App from './01-base/07Ref'
// import App from './01-base/08state'
// import App from './01-base/09数组循环'
ReactDOM.render(
    // <div>
    // <b><h1>ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上</h1></b>
    // <h2>JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面</h2>
    // </div>
    // React.createElement("div",{
    //     id:"aaaa",
    //     class:"bbbbb"
    // },"我是第二种方案")
    // <div>11111</div>
    <App></App>
    ,
    document.getElementById("root")
    )
//JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM元素 —>插入页面
    /**
     * jsx=js+xml
     */
文章标签：
前端开发
关键词：
React Native框架
react.js框架
t75yjb52rsccc
目录
相关文章
土木林森
|
10天前
|
前端开发 JavaScript 开发者
颠覆传统：React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库，以其虚拟DOM机制和组件化设计，成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容，帮助开发者更好地理解和使用React。
土木林森
36 9
德国都芳最好
|
4天前
|
开发框架 前端开发 JavaScript
React 框架的优点和缺点是什么？
React框架作为当前主流的前端开发框架之一，具有诸多优点，同时也存在一些缺点
德国都芳最好
9 1
德国都芳最好
|
4天前
|
JavaScript 前端开发 算法
React 框架和 Vue 框架的区别是什么？
React框架和Vue框架都是目前非常流行的前端JavaScript框架，它们在很多方面存在区别
德国都芳最好
14 1
德国都芳最好
|
4天前
|
移动开发 前端开发 JavaScript
React框架
React是一个用于构建用户界面的JavaScript库，由Facebook开发并于2013年开源，目前在前端开发领域得到了广泛的应用。
德国都芳最好
6 1
想飞的雪糕
|
22天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时，利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成，通过抽象出辅助方法`useRx`和`pushPipe`，实现跨框架的状态管理。具体介绍了各框架的响应式机制，展示了如何将RxJS的Observable对象转化为框架的响应式数据，并通过示例代码演示了使用方法。此外，还讨论了全局状态源与WebComponent的部署优化，以及一些实践中的改进点。这些方法不仅简化了异步编程，还提升了代码的可读性和可维护性。
想飞的雪糕
63 1
vohelon
|
3月前
|
前端开发 JavaScript 算法
React框架有哪些特点？
【8月更文挑战第28天】React框架有哪些特点？
vohelon
217 65
一缕微风绕指柔
|
1月前
|
前端开发 JavaScript UED
构建现代Web应用：使用React框架打造单页面应用
【10月更文挑战第9天】构建现代Web应用：使用React框架打造单页面应用
一缕微风绕指柔
83 1
一缕微风绕指柔
|
1月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术：React框架入门
【10月更文挑战第9天】 探索现代Web前端技术：React框架入门
一缕微风绕指柔
26 1
奥耶可乐冰
|
2月前
|
前端开发 搜索推荐 API
【Prompt Engineering：ReAct 框架】
ReAct 框架由 Yao 等人（2022）提出，结合大语言模型（LLMs）生成推理轨迹与任务操作，交替进行推理与行动。此框架允许模型与外部环境（如知识库）互动，以动态更新操作计划并处理异常。ReAct 在语言和决策任务上表现优异，提升模型的人类可解释性和可信度。研究显示，ReAct 优于多个基准模型，尤其在结合链式思考时效果最佳。通过实例演示，ReAct 能有效整合内外部信息，优化推理过程。
奥耶可乐冰
111 9
【Prompt Engineering：ReAct 框架】
明月何时照我还呀
|
2月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么？
React 和 Vue.js 框架的区别是什么？
明月何时照我还呀
41 11

热门文章

最新文章

  • 1
    React-Native 爬坑
  • 2
    一段探索React自建内部构造的旅程
  • 3
    React 2|学习笔记
  • 4
    react-06-class组件-基础
  • 5
    react-native-easy-app 详解与使用之（三） View，Text，Image，Flatlist
  • 6
    照着官方文档学习react
  • 7
    React Native-组件的引用
  • 8
    【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
  • 9
    React中的Virtual DOM(看这一篇就够了)
  • 10
    react学习系列4 组件生命周期
  • 1
    React 项目用过什么脚手架（本题是开放性题目）
    55
  • 2
    React中的DOM diff算法是如何工作的
    54
  • 3
    react中JSX的详解
    64
  • 4
    react中的useEffect的使用
    50
  • 5
    写出易维护的代码｜React开发的设计模式及原则
    110
  • 6
    【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
    105
  • 7
    【TypeScript技术专栏】TypeScript与React的完美结合
    100
  • 8
    【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
    238
  • 9
    【亮剑】在Web开发中，React提供了丰富的交互机制，onChange事件是处理用户输入变化非常常用的一个手段。
    69
  • 10
    【亮剑】在React中如何通过点击事件控制组件显示与隐藏，包括基础概念和高级应用
    604

    • 相关课程

    更多
  • React 入门与实战
  • React 入门教程开发文档
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • 前端开发框架Bootstrap使用教程
  • 移动Web前端开发

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践
    • 下一篇
    阿里云OSS设置跨域访问