我的react学习

Posted aerfajj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我的react学习相关的知识,希望对你有一定的参考价值。

基础部分

创建一个react的项目

  • 创建一个react的项目

    全局安装 react 指令

        // 全局安装react (根据需要安装,不是必须的)
        npm i -g react // 或者 yarn -global react
    
        // 全局安装 react的脚手架 (创建react的应用,必须安装脚手架)
        npm i -g create-react-app // 或者 yarn -global create-react-app

    使用脚手架创建应用

    create-react-app 应用名称
    // 例如创建一个TodoList应用
    create-react-app todo-list

    注意点:

      1.全局安装create-react-app才能使用脚手架创建应用
      2.应用名称全部为小写字母,不能出现“TodoList”这样的名称

组件的使用

  • 组件的组成

        // React 是react组件必不可少的,用于支持jsx语法的模块,虽然看不到引用,但是不能少
        // Component 所有的react的组件都继承于Component,它是react组件的基类
        import React, { Component } from 'react';
    
        // TodoItem 自定义的组件
        import TodoItem from "./TodoItem"
    
        // 定义TodoList组件 ,该组件继承于基类Component
        class TodoList extends Component {
                /***
                 * constructor 当前类的构造函数
                * props 简单的理解:是父类传递的参数,例如 传递的值 或 方法,它是一个对象
                * super(props) 简单的理解是:继承父类中的传递的参数
                **/
            constructor(props){
                super(props)
                // state 是 所有react变量的仓储,简单理解就是:当前组件的变量都放在这个对象中
                this.state = {
                    inputValue: "",
                    List: []
                }
                // 使用 bind绑定this,让方法中的this永远指向当前的组件(可根据需求改变this的指向)
                this.getList =  this.getList.bind(this)
                this.inputChang = this.inputChang.bind(this)
                this.addItem = this.addItem.bind(this)
                this.delItem = this.delItem.bind(this)
            }
            // react组件必不可少的方法,return 返回的是jsx的模板,可以理解为类似html+js的模板
            render() {
                return (
                    {/*在jsx中只能有一个根标签,使用<></>(幽灵标签)包裹,既能满足jsx的语法格式,在浏览器解析时不会解析幽灵标签,减少了dom树结构节点 */}
                    <>
                        <div>
                            <input value={this.state.inputValue} onChange={this.inputChang} /> <button onClick={this.addItem}>添加</button>
                        </div>
                        <ul>
                            {this.getList()}
                        </ul>
                    </>
                );
            };
    
            // 遍历输出item
            getList() {
                ...
            }
            // 动态改变输入框的值
            inputChang( e ) {
                ...
            }
    
            // 添加item
            addItem() {
                ...
            }
    
            // 删除item
            delItem(index) {
                ...
            }
        }
        // 导出TodoList
        export default TodoList;
  • 认识jsx

    简单的jsx的语法

    ...
        render() {
            return (
                {/*在jsx中只能有一个根标签,使用<></>(幽灵标签)包裹,既能满足jsx的语法格式,在浏览器解析时不会解析幽灵标签,减少了dom树结构节点 */}
                <>
                    <div>
                        <input value={this.state.inputValue} onChange={this.inputChang} /> <button onClick={this.addItem}>添加</button>
                    </div>
                    <ul>
                        {this.getList()}
                    </ul>
                </>
            );
        };
    
    ...
    1. 在jsx中只能有一个根标签,使用<></>(幽灵标签)包裹,既能满足jsx的语法格式,在浏览器解析时不会解析幽灵标签,减少了dom树结构节点,也可以使用代码片段(Fragments ),效果和<></>相同,只是Fragments 还有更广泛的使用,后面会有详细说明

    2. 在jsx中使用注释,多行使用{/* 注释内容 */},单行使用

          // 多行
      
          {/* 多行注释内容 */}
          {/*
              多行注释内容
          */}
      
      
          // 单行
          {
              // 单行注释内容
          }
      
    3. 在jsx中使用组件的变量或者方法,使用{}包裹

    4. 在jsx中绑定的方法默认this指向undefined,所以需要使用bind绑定this的指向

          // 方式1: 在constructor指定this
          constructor(props){
              super(props)
              this.state = {
                  inputValue: "",
                  List: []
              }
              this.getList =  this.getList.bind(this)
              this.inputChang = this.inputChang.bind(this)
              this.addItem = this.addItem.bind(this)
              this.delItem = this.delItem.bind(this)
          }
      
          // 方式2:绑定事件的时候指定this
      
          ...
              <li onClick={this.delItem.bind(this,index)}></li>
          ...
      
  • 组件的基本通讯

  1. 最简单的 父 ---> 子 传值

    
    // 父组件通过在子组件标签上设置属性传递数据
        <Boy
            teacherName={ this.state.teacherName }
        />
    
        <Girl
            teacherName={ this.state.teacherName }
        />
    
    // 子组件通过this.props获取父组件传递的数据
    // this.props.teacherName 获取老师的名称
        render(){
            return (
                <>
                    <p>
                        我是{this.state.boyName},我的老师是{this.props.teacherName},
                        我对老师很
                        <button onClick={()=> this.props.say(this.state.boyName,"满意") } >
                            满意
                        </button>
                    </p>
                </>
            )
        }
    
  2. 最简单的 子 ---> 父 通讯

    
    // 父组件通过在子组件标签上设置属性传递数据
        <Boy
            say = { this.stuSay }
        />
    
        <Girl
            say = { this.stuSay }
        />
    // 子组件通过this.props获取父组件传递的数据
    // this.props.say 获取父组件提供的方法,通过调用父组件的方法,将传递的数据作为参数传入,当父组件的方法被调用,就通过获取当前方法参数的方式,得到了子组件传递的数据
        render(){
            return (
                <>
                    <p>
                        我是{this.state.boyName},
                        我对老师很
                        <button onClick={()=> this.props.say(this.state.boyName,"满意") } >
                            满意
                        </button>
                    </p>
                </>
            )
        }
    
  3. 最简单的非父子通讯

核心思路:找到共同的父组件,同时使用父组件传递的值和方法

过程有些复杂,这里省略了

teacher.js

import React,{ Component } from "react"

// 导入 Boy(男孩) 和 Girl(女孩) 组件
import Boy from "./boy"
import Girl from "./girl"

export default class Teacher extends Component {
    constructor(props){
        super(props)
        this.state = {
            teacherName: "Tom",
            stuName: "",
            stuSayContent: "",
            boyName: "",
            girlName: "",
            boySayContent: "",
            girlSayContent: ""
        }
        this.stuSay = this.stuSay.bind(this);
        this.boySaySecret = this.boySaySecret.bind(this);
        this.grilSaySecret = this.grilSaySecret.bind(this);
    }
    render(){
        let evaluation = false
        if (this.state.stuName!=="" && this.state.stuSayContent) {
            evaluation = true
        }
        return (
            <>
                <p>我是{ this.state.teacherName }老师</p>

                <div>
                    {
                        evaluation ? (<p>学生评价:{this.state.stuName}对我很{this.state.stuSayContent}</p>) : " "
                    }
                </div>

                <Boy
                    say = { this.stuSay }
                    teacherName={ this.state.teacherName }
                    boySaySecret = {this.boySaySecret}
                    girlSayContent = {this.state.girlSayContent}
                />

                <Girl
                    say = { this.stuSay }
                    teacherName={ this.state.teacherName }
                    grilSaySecret = {this.grilSaySecret}
                    boySayContent = {this.state.boySayContent}
               />
            </>
        )
    }
    stuSay(stuName,stuSayContent){
        this.setState(()=>{
            return {
                stuSayContent,
                stuName
            }
        })
    }
    boySaySecret(constent){
        this.setState(()=>{
            return {
                boySayContent : constent
            }
        })
    }
    grilSaySecret(constent){
        this.setState(()=>{
            return {
                girlSayContent : constent
            }
        })
    }
}

boy.js


import React,{ Component } from "react"

export default class Boy extends Component {
    constructor(props){
        super(props)
        this.state = {
            boyName: "龙震天"
        }
    }
    render(){
        return (
            <>
                <p>
                    我是{this.state.boyName},我的老师是{this.props.teacherName},
                    我对老师很
                    <button onClick={()=> this.props.say(this.state.boyName,"满意") } >
                        满意
                    </button>,
                    我想对女孩说:<button onClick={()=> this.props.boySaySecret("我喜欢你")}>悄悄话</button>,
                    她对我说:{this.props.girlSayContent}

                </p>
            </>
        )
    }

}

gril.js


import React,{ Component } from "react"

export default class Boy extends Component {
    constructor(props){
        super(props)
        this.state = {
            girlName: "怜香玉"
        }
    }
    render(){
        return (
            <>
                <p>
                    我是{this.state.girlName},我的老师是{this.props.teacherName},
                    我对老师很
                    <button onClick={()=> this.props.say(this.state.girlName,"不满意") } >
                        不满意
                    </button>,
                    我想对男孩说:<button onClick={() => this.props.grilSaySecret("我也是")}>悄悄话</button>,
                    他对我说:{this.props.boySayContent}
                </p>
            </>
        )
    }

}

高级部分

待续....

以上是关于我的react学习的主要内容,如果未能解决你的问题,请参考以下文章

[译] 如何在React中写出更优秀的代码

[vscode]--HTML代码片段(基础版,reactvuejquery)

react 对循环warning提示增加key的研究

javascript 用于在节点#nodejs #javascript内设置react app的代码片段

中继片段传播不起作用

是否有用于 React Function 组件的类型,包括返回片段、空值、字符串等?