JSX语法

1、标签不能添加引号，换行用括号包裹，并且只有一个根标签

const H1 = 
标题
const Div = (
    

        
H1
        
H2
    
)

2、变量使用花括号

const id = 1
const name = "杜恒"
const Div = 
{name}

3、外连样式与内联样式

// 使用class时，需要写className的方式
const Div = 

// 内联样式时，需要成变量内包对象方式
const Div2 = 
Test

4、单标签需要闭合

const div = (
    

        

        
    
)

5、循环数组

const arr = ['vue', 'react', 'jquery']
const Ul = (
    

        { arr.map(item => 
{item}
) }
    
)

组件

1、函数式组件（简单组件<在hooks里面可以实现3大属性>）

function Test() {
    console.log(this) // undefined
    return 
Test组件
}
ReactDOM.render(, document.querySelector("#main"))

2、类式组件（复杂组件）

class Test extends React.Component {
    render() {
        console.log(this); // 由Test类创造的组件实例对象
        return 
Test组件
    }
}
/*
 * 
 * 首先解析Test标签，并找到Test的类
 * 接着React内部，会去new这个Test类，接着会初始化实例对象上的render方法
 *
 */
ReactDOM.render(, document.querySelector("#main"))

组件实例三大属性 state

class Weather extends React.Component {
    render() {
        console.log(this);
        return 
今天天气很炎热
    }
}
ReactDOM.render(, document.querySelector("#main"))

打印类的实例对象上的this，可以看到实例对象身上挂了一个state属性，默认值为null

class Weather extends React.Component {
    /* constructor根据页面上有多少个实例就调用几次 */
    constructor(props) {
        super(props)
        /* 向当前实例上挂载一个属性 */
        this.state = { isHot: false }
        /* 解决changeWeather中的this指向undefined的问题  */
        this.changeWeather = this.changeWeather.bind(this)
    }
    /* render调用1 + n次，第一次进入默认执行一次，后state更新触发render */
    render() {
        /* this指向当前的实例，于是可以通过this访问到state属性 */
        console.log(this);
        /* onClick绑定的函数不能加括号，否则会直接执行函数！ */
        return 
今天天气很{this.state.isHot ? '炎热' : '凉爽'}
    }
    /* 
     *
     * changeWeather挂载在Weather的原型对象上，供Weather的实例对象使用，
     * 只有Weather的实例对象去调用这个方法，函数内的this才会指向Weather的实例对象
     * 由于在class中会将函数开启局部严格模式，因此changeWeather里的this会指向undefined
     * 但需要解决这个this指向问题，因此就需要在上方初始化的时候，改变this的指向
     * 
     */
    changeWeather() {
        console.log(this);
        /* 
         * 状态不可直接更改！
         * this.state.isHot = !this.state.isHot ×
         */
        this.setState({
            isHot: !this.state.isHot
        })
    }
}
ReactDOM.render(, document.querySelector("#main"))

上面的代码可以简写成下方代码

class Weather extends React.Component {
    // 直接赋值给实例化对象身上
    state = { isHot: false }
    // 直接赋值给实例化对象身上
    changeWeather = () => {
        console.log(this); // this 指向当前实例化后的对象
        this.setState({ isHot: !this.state.isHot })
    }
    render() {
        return 
今天天气很{this.state.isHot ? '炎热' : '凉爽'}
    }
}
ReactDOM.render(, document.querySelector("#main"))

组件实例三大属性 props

1、props的基本使用

class Person extends React.Component {
    render() {
        return 
{this.props.name}
    }
}
const person = {
    age: 18,
    sex: "男"
}
ReactDOM.render(, document.querySelector("#main"))

2、props属性限制

class Person extends React.Component {
    /* 限制props传入的类型 */
    static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
        sex: PropTypes.string
    }
    /* props未传的时候的默认值 */
    static defaultProps = {
        age: 18,
        sex: "男"
    }
    render() {
        return (
            

                
姓名：{this.props.name}
                
年龄：{this.props.age}
                
性别：{this.props.sex}
            
        )
    }
}
ReactDOM.render(, document.querySelector("#main"))

3、定义组件时，如果写了构造器，需要将props传递给父类，否则可能会出现找不到 this.props 的bug

class Person extends React.Component {
    constructor() {
        super()
        console.log(this.props); // undefined
    }
    render() {
        return 
{this.props.name}
    }
}

4、函数式组件接收props

function Person(props) {
    console.log(props);
    return 
{props.name}
}
ReactDOM.render(, document.querySelector("#main"))

组件实例三大属性 refs

1、字符串形式的 ref （已废弃）

class Test extends React.Component {
    /* 点击显示左侧input的内容 */
    showInputValue = () => {
        console.log(this);
        alert(this.refs.input.value)
    }
    showBlurInputValue = e => {
        e.persist();
        console.log(e);
        alert(e.target.value)
    }
    render() {
        return (
            

                

                    
                    点击显示左侧提示
                
                

                    
                
            
        )
    }
}

2、回调函数形式的 ref

class Test extends React.Component {
    showInputValue = () => {
        console.log(this.input);
        alert(this.input.value)
    }
    render() {
        return (
            

                 (this.input = node)} type="text" />
                点击显示左侧提示
            
        )
    }
}

内联方式的ref里的回调函数，在更新状态的时候，会触发2次，第一次会得到null，第二次才得到当前的节点，如果想避免这个问题，可以将函数写成class的方式，上面的方式可以写成下面这种

class Test extends React.Component {
    /* 点击显示左侧input的内容 */
    showInputValue = () => {
        console.log(this.input);
        alert(this.input.value)
    }
    /* 保存input */
    saveInputRef = (node) => {
        this.input = node
    }
    render() {
        return (
            

                
                点击显示左侧提示
            
        )
    }
}

3、createRef 形式

class Test extends React.Component {
    myRef = React.createRef()
    /* 点击显示左侧input的内容 */
    showInputValue = () => {
        console.log(this.myRef);
        alert(this.myRef.current.value)
    }
    render() {
        return (
            

                
                点击显示左侧提示
            
        )
    }
}
ReactDOM.render(, document.querySelector("#main"))