React框架第九课 React基础第三课-阿里云开发者社区

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

2023-07-16 68

版权

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

简介： 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框架第九课 React基础第三课

热门文章

最新文章

相关课程

相关电子书

相关实验场景