我的react学习

程序员文章站 2022-12-26 08:28:30

基础部分创建一个react的项目创建一个react的项目全局安装 react 指令使用脚手架创建应用注意点： 1.全局安装create react app才能使用脚手架创建应用 2.应用名称全部为小写字母，不能出现“TodoList”这样的名称组件的使用组件的组成认识jsx 简单的j ......

基础部分

创建一个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>
            </>
        );
    };

...

在jsx中只能有一个根标签，使用<></>(幽灵标签)包裹，既能满足jsx的语法格式，在浏览器解析时不会解析幽灵标签，减少了dom树结构节点,也可以使用代码片段（fragments ），效果和<></>相同，只是fragments 还有更广泛的使用，后面会有详细说明

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

    // 多行

    {/* 多行注释内容 */}
    {/*
        多行注释内容
    */}


    // 单行
    {
        // 单行注释内容
    }

在jsx中使用组件的变量或者方法，使用{}包裹

在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>
    ...

组件的基本通讯

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

// 父组件通过在子组件标签上设置属性传递数据
    <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>
            </>
        )
    }

最简单的子 ---> 父通讯

// 父组件通过在子组件标签上设置属性传递数据
    <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>
            </>
        )
    }

最简单的非父子通讯

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

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

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>
            </>
        )
    }

}

高级部分

待续....

上一篇： 20190516-归并排序

下一篇： PHP中的超全局变量

我的react学习

基础部分

创建一个react的项目

组件的使用

高级部分

一个年薪20万客服的思考：我如何才能不一样？

为什么说基于机器学习的AI预测更智能？

追忆我在中关村电脑城当“职骗”的日子

React-Native中一些常用组件的用法详解(一)

区块链自媒体再现封号潮，新手学习区块链的途径还有哪些？

PHP getID3类的使用方法学习笔记【附getID3源码下载】

React-Native中一些常用组件的用法详解(二)

Python的dict字典结构操作方法学习笔记

Python中函数参数设置及使用的学习笔记

CURL的学习和应用(附多线程实现)