creat-react-app-基础学习(二)

基础操作

---

1.if语句

import React from 'react';
//变量值,不会被其他文件直接获取,可以看做私有变量
let tool;
//获取一个随机数
function changeTool (){
    tool = Math.floor(Math.random()*10)+1;
    console.log(tool);
}
//返回一个模板
function DemoIf(){
    //获取随机数
    changeTool();
    return (
        <div>
            {/* 判断随机数是不是1,不是就打印,是就通过 */}
            {
                tool === 1?
                <span>pass</span>:
                <span>tool 是 {tool}</span>
            }
        </div>
    )
}
export default DemoIf;

{只能写表达式,如果比较复杂,可以使用嵌套的方式}

import React from 'react';
//变量值,不会被其他文件直接获取,可以看做私有变量
let tool;
//获取一个随机数
function changeTool (){
    tool = Math.floor(Math.random()*10)+1;
}
//复杂逻辑
function Complex(props){
    if(!props.value){
        return <span>value is undefined</span>
    }
    if(props.value % 2 === 0 && props.value % 3 === 0 && props.value % 6 === 0){
        return <span>pass</span>
    }else{
        return <span>tool 是 {props.value}</span>
    }
}
//返回一个模板
function DemoIf(){
    //获取随机数
    changeTool();
    return (
        <div>
            <Complex value={tool}></Complex>
        </div>
    )
}
export default DemoIf;

然后每次测试只有刷新,不行,得加个按钮和方法来点击更新

//修改了DemoIf
//返回一个模板
function DemoIf(){
    //获取随机数
    changeTool();
    return (
        <div>
            <Complex value={tool}></Complex>
            <br /><button onClick={changeTool}>点击更新</button>
        </div>
    )
}

然后和想象的不太一样,这个值咋定死了.
然后去了解了官方文档,接下来就是有状态的组件

---

有状态的组件

继续上一个案例使用es6,class语法糖

import React , {Component} from 'react';

function getTool(){
    return Math.floor(Math.random()*10);
}

export default class DemoIf extends Component {
    constructor(props){
        super(props);
        this.state = {
            tool : getTool()
        };
    }
    changeTool=()=>{
        this.setState({
            tool : getTool()
        })
    }

    render(){
        return (
            <div>
                <div>
                    {this.state.tool ===1 ? 'pass' : this.state.tool}
                </div>
                <button onClick={this.changeTool}>改变tool值</button>
            </div>
        )
    }
}

总结
1.在自定义函数的过程中,this指向undefined的
思路 : 自义定函数的缩写实质上是function匿名函数的定义,所以this会在函数调用时,触发,但是this不能指向全局,所以变成了undefined,
解决思路:我认为的最优解,箭头函数,箭头函数内的this指向函数定义时的父级作用域
然后的话还有render中的this指向正确,所以可以将this作为参数传过去,

然后我觉得有点这样的箭头函数有点丑,所以去查了下有没有更好的写法

---

react 自定义方法this指向undefined的问题解决(4种)
1.忘记了es6新增的function API(需要复习)
2.在箭头函数中调用函数,this指向这个箭头函数所在的作用域,所以可以获取this

---

switch 语句

import React , { Component } from 'react';

export default
class MySwitch extends Component{
    constructor(props){
        super(props);
        this.state = {
            value : Math.floor(Math.random()*10)
        }
    }
    
    render(){
        return (
            <MySwitchFnc value={this.state.value} ></MySwitchFnc>
        )
    }
}

function MySwitchFnc(props){
    switch(props.value === 1){
        case true : return (
            <div>正确</div>
        )
        case false : return (
            <div>错误</div>
        )
        default : return(
            <div>系统错误</div>
        )
    }
}

总结
1.建议使用===
2.因为用来return 所以建议去掉break
3.因为使用全等,所以注意值两边的类型要一致