个人react学习

时间  2019-12-07
标签 个人 react 学习 栏目 React 繁體版
原文   原文链接

基础部分

建立一个react的项目

  • 建立一个react的项目html

    全局安装 react 指令react

    // 全局安装react （根据须要安装，不是必须的）
    npm i -g react // 或者 yarn -global react

    // 全局安装 react的脚手架 (建立react的应用，必须安装脚手架)
    npm i -g create-react-app // 或者 yarn -global create-react-app

    使用脚手架建立应用npm

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

    注意点：浏览器

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

组件的使用

  • 组件的组成app

    // 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;

  • 认识jsxdom

    简单的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 还有更普遍的使用，后面会有详细说明this

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

      // 多行

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


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

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

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

}

高级部分

待续....

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程