pls-00302: 必须声明 组件_React组件那些事

组件

React组件分为函数组件和class组件。如果组件的功能简单，就用函数组件，毕竟写起来简单。但是函数组件都是全局的，如果需要某个组件的功能是局部的（局部的变量、局部的方法、render都是局部的），或者不影响全局，我们就需要class组件，class组件相较而言，写起来更加复杂，需要死记硬背的东西更多，但是，实现的功能更加强大。

下面先实现：显示number，实现+1和-1的操作

上代码

//定义number的初始值
let number=0
//定义+1的方法
let add=()=>{
    
  number+=1
  render()
}
//定义-1的方法
let minus=()=>{
    
  number-=1
  render()
}
//这个render是干嘛的？
//这是普通的render函数调用
render()
//将number挂载到#root下面
function render(){
    
  ReactDOM.render(
    <div>
      <span>{
    number}</span>
      <button onClick={
    add}>+</button>
      <button onClick={
    minus}>-</button>
    </div>,
    document.querySelector('#root')
  )
}

然后，通过函数组件实现number显示

//定义number和相关的方法
let number=0
let add=()=>{
    
  number+=1
  render()
}
let minus=()=>{
    
  number-=1
  render()
}
//出口函数，不管写多少函数组件，都放在这里
function App(){
    
  return (
    <div>
      <span>{
    number}</span>
      <button onClick={
    add}>+</button>
      <button onClick={
    minus}>-</button>
    </div>
  )
}

render()

function render(){
    
  ReactDOM.render(
      //等价于React.createElement(App)
  <App/>,
    document.querySelector('#root')
  )
}

下一步的需求：显示两个number，并且都能实现+1和-1的功能。

如果这时候依然用函数组件，用户点击一个按钮，另一个按钮的数值也会跟着变化。因此，我们选择了Class组件。

如下代码：

下面是Class的最基本的框架

class App2 extends React.Component{
    
  //局部render
  render(){
    
    return(
      <div>
     app 222
    </div>
    )
  }
}

function render(){
    
  ReactDOM.render(
<App2/>,
document.querySelector('#root')
)
}
render()

React如何接受参数？

React把接受到的参数叫做props

class App2 extends React.Component{
    
  //局部render
  render(){
    
    return(
      <div>
     app 222
   //name属性的值
     {
    this.props.name}
    </div>
    )
  }
}

function render(){
    
  ReactDOM.render(
<App2 name="Frank"/>,
document.querySelector('#root')
)
}
render()

React如何设置局部变量？

上代码：注意观察如何声明局部变量，并且使用

class App2 extends React.Component{
    
  //设置局部变量
  //下面的两行代码必须写
  constructor(props){
    
   super(props)
  //注意等号右边是对象
    this.state= {
    
      number:0
    }
  }
  //局部render
  render(){
    
    return(
      <div>
       app 222
       {
    this.props.name}
       <div>
         {
    this.state.number}
       </div>
    </div>
    )
  }
}

function render(){
    
  ReactDOM.render(
<App2 name="Frank"/>,
document.querySelector('#root')
)
}
render()

这样，React的基本功能就都有了，如果有需要，就往里面加东西就行了。

由此，我们来完善App2组件。come on：

class App2 extends React.Component{
    
  //设置局部变量
  constructor(props){
    
   super(props)
  //注意等号右边是对象
    this.state= {
    
      number:0
    }
  }
  add(){
    
      //这样写是错的
    //this.state.number+=1
    //应该这样写
    this.setState({
    
      number:this.state.number+1
    })
  }
  //局部render
  render(){
    
    return(
      <div>
      {
    number}
       <div>
         {
    this.state.number}
         <button onClick={
    this.add.bind(this)}>+</button>
       </div>
    </div>
    )
  }
}

function render(){
    
  ReactDOM.render(
<App2/>,
document.querySelector('#root')
)
}
render()

上面代码需要注意的三点：

1. 第一点：this.add后面不要加括号
2. 第二点：add函数里面的this是什么，是undefined，不是组件App2。需要用到this时，在add后面加bind(this)。
3. 第三点，改数据，必须要用setState。setState可以对更新进行优化，但是，由于更新是异步操作，因此没法进行分步更改数据

使用Class组件需要记住的点

1. 必须继承React.Component
2. constructor必须