react base（一）

 

1.  插值表达式： {} 是一对单大括号

2.  和html的属性差异：

class => className
defaultValue => value
checked => defaultChecked
innerHTML => dangerouslySetInnerHTML
for => htmlFor

3. 创建组件的两种方式：

  （1）function      

import React from "react"
export default function No () {
    return <div>
        这里是function创建的组件
    </div>
}

在App.js中引用

(2) class

import React from "react"
export default class Index extends React.Component {
    render() {
        return <div style={{backgroundColor: 'pink'}}>
            <h1>这里是class创建的组件</h1>
        </div>
    }
}

 

 

 4. function和class创建组件的区别：

function是无状态组件，没有私有的state和生命周期函数，适用于只展示的场景，只能接收外面传进去的props，引用时用props.xx，不能使用this，如果需要向其添加一些 state，可以用state Hook解决

class是有状态的组件，具有私有的state和生命周期函数，被大多数人使用，接收外面的props，引用时用this.props

5. 使用props父组件向子组件传值：

<Receive name={'hello react'}>

function接收

function Receive(props) {
  return <div>
  {props.name}  
</div>      
}

class接收

export default class Receive  extends React.Component {  
　　render () {
　　　　return <div>{this.props.name}</div>
　　}
}

6. 事件传值

bind方式： 

 <button type={"button"} onClick={() => this.add('hello world')}>事件传值1</button>

箭头函数方式：

<button type={"button"} onClick={this.edit.bind(this, 'hello world')}>事件传值2</button>

方法：

   add (v) {
        console.log('箭头函数接收的值', v)
    }
    edit (v) {
        console.log('bind方式接收的值', v)
    }

7. state

import React from 'react'
export default class TestState extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
    add () {
        this.setState({ count: this.state.count + 1 })
        console.log(this.state.count)
    }
    render() {
        return (
            <div>
                <p>You clicked {this.state.count} times</p>
                <button onClick={() => this.add()}>
                    Click me
                </button>
            </div>
        );
    }
}

 

 

 

可以看到this.state.count 没有实时更新

add () {
        this.setState({ count: this.state.count + 1 }, () => {
            console.log('回调', this.state.count)
        })
        console.log(this.state.count)
  }

 

 

在add()中加了回调函数才会更新

下面用function + state Hook来实现上述class:

import React, { useState } from "react";
export default function SH () {
    let [count, setCount] = useState(0)
    return <div style={{backgroundColor: 'gold'}}>
        { count }
        <div>
            <button type={"button"} onClick={() => setCount(count+1)}>count++</button>
        </div>
    </div>
}

 

 此时可以实时更新