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

}

高级部分

待续....