简单理解React组件

两种组件：函数组件和类组件

//函数组件
function min() {
    return(
        <div className="App">
            爸爸
            <Son /> 自闭标签直接使用即可
        </div>
    )
}

//类组件
class Son extends React.Component{
    constructor(){
        super();
        this.state={
            n:0
        };
    }
    add(){
        this.setState({n: this.state.n+1})
    }
    render(){
        return(
            <div className="Son">
                儿子 n: {this.state.n}
                <button onClick={()=>this.add()}>+1</button>
                <GrandSon />
            </div>
        )
    }
}

//函数组件
const GrandSon = ()=> {
    //这是析构赋值
    const [n,setN] = React.useState(0);
    return(
        <div className="GrandSon">
            孙子 n: {n}
            <button onClick={()=>setN(n+1)}>+1</button>
        </div>
    )
}

React语法糖-标签

当我们在写<Son />的时候我们在写什么？首先排除HTML，我们不是在写HTML，

<Son />会被翻译成 React.createElement(App)

React.createElement的逻辑

如果传入一个字符串'div'，则会创建一个div

如果传入一个函数，则会创建一个函数并调用其返回值

如果传入一个类，则在类前面加一个new（这会导致执行constructor），获取一个组件对象，然后调用对象的render方法，获取其返回值

Props

给类组件传递

// 这是一个子组件 子组件使用类构成的
<Son msg="传递数据"/>

传递的数据可以是任何东西，如果是字符串，就使用双引号，如果传递的是值就使用花括号。

class Son extends React.Component{
  render(){
    return(
      {this.props.msg}
    )
  }
}

// 如上，在花括号中使用，this.props.msg接受数据

给函数组件传递

传递方法不变，接受方法如下

const GrandSon = (props)=>{
  {props.msg}
}

箭头函数括号中可以写任何声明名，但通常我们写成props，在花括号中使用props.msg即可

 

State

state相当于Vue中的data，在React中如何初始化&读&写

在类中 初始化&读&写// 初始化 

 //初始化

 constructor(){
    super()
    this.state = {
      n:0
    }
  }

// 在类中声明 this.state={} 
// 然后填入数据


// 读取 
{this.state.n}
// 使用 this.state.n方法


// 修改 使用 setState
this.setState({n:this.state.n+1})
 
//无bug写法
//因为React没有监听数据，所以必须开辟一个新的数据空间，让他们互相对比，让React修改数据

this.setState(state=>{
  const n =  state.n + 1
  return {n}
})

如果使用vue，我们修改的data数据只需要 this.state.n+1 ，而react需要这么写是因为他并没有监听任何数据，我们需要告知react我们修改了n的数据

 

在函数中 初始化&读&写

// 初始化
//setxxx 就是一种React修改数据的方法
const [x,setX] = React.useState(0)

// 读取 

{x}

// 使用 

onClick={()=>{setX(x+1)}

类组件注意事项

this.state.n +=1 失效？

例如我们直接更改n，UI不会更新，因为React没有监听n，我们可以调用setState触发UI更新

setState会异步更新UI

setState后，state不会马上改变，现在更推荐使用setState函数

复杂state

如果我们有两个state数据怎么办？不用怕，state会帮我们自动合并第一层数据，合并了第一层，我们如果有两层数据怎么办？只需要在函数中加入 ...state 即可

事件绑定

类组件的事件绑定

onClick={ ()=>{ ... } } (推荐写法)

• 安全，易懂

onClick={this.....} 

• this容易变成window

onClick={this.addN.bind(this)} 

• 绑定this，太麻烦

类组件的事件绑定最终写法

class Son extends React.Component{

//这两种写法对等
addN = () => this.setState({n: this.state.n + 1});
=== 
constructor(){ this.addN = ()=> this.setState({n: this.state.n + 1}) } 

render(){
return <button onClick={this.addN}>n+1</button>
}
}