React笔记 （函数组件&类组件）

什么是组件

• 能跟其他物件 组 合起来的物 件 ，就是组件
• 组件并没有明确的定义，靠感觉理解 就行
• 就目前而言，一个返回 React 元素的 函数 就是组件
• 在 Vue 里，一个 构造选项 就可以表示一个组件

一、函数组件

const welcome = () => {
  return (
    <h2>Hello,fang</h2> 
  )
}
使用方法：<Welcome />

上面代码是函数组件的基本写法

添加props（外部数据）

const welcome = ( props ) => {
  return (
    <h2>Hello,{ props.name }</h2> 
  )
}
使用方法：<Welcome name="fang" />

上面代码传入 props 为外部数据，直接读取参数
props.name 来获取外部传入的数据。

添加state（内部数据）

const welcome = ( props ) => {
  const [ n, setN ] = React.useState(0)
  return (
    <h2>Hello,{ props.name }</h2> 
    <span>{ n }</span>
    <button onClick={ () => { setN (n + 1) } }>点我+1</button>
  )
}
使用方法：<Welcome name="fang" />

useState 返回数组，第一项读，第二项写
[n, setN] 这个数组的第一项是用来 读取 数据，第二项则是用来 改写 数据，当我们调用 setN 时是不会改变 n 的，只会产生一个新的 n ，

函数组件注意事项

• 类组件的 this.setState 会等一会改变，而函数组件的 setN 是永远不会改变，只会重新产生一个新的
• 跟类组件类似的地方：
  也要通过 setX(新值) 来更新 UI
• 跟类组件不同的地方：
  没有 this ,一律用参数和变量

一、类组件

class Welcome extends React.Component{
  constructor(){
    super()
    this.state={}
  }
  render(){
    return(
      <h2>Hello,fang</h2> 
    )
  }
}
export default Welcome 
使用方法：<Welcome />

上面代码是类组件的基本写法

添加props（外部数据）

class Welcome extends React.Component{
  constructor(){
    super()
    this.state={}
  }
  render(){
    return(
      <h2>Hello,{ this.props.name }</h2> 
    )
  }
}
export default Welcome
使用方法：<Welcome name="fang" />

上面代码直接读取属性 this.props.name 来获取外部传入的数据。

添加state（内部数据）

class Welcome extends React.Component {
  constructor() {
    super()
    this.state = {
      n: 0
    }
  }
  add() {
    this.setState({
      n: this.state.n + 1
    })
  }
  render() {
    return (
      <div>
        <h2>Hello,{this.props.name}</h2>
        <span>{n}</span>
        <button onClick={() =>  this.add() }>
          点我 + 1
       </button>
      </div>
    )
  }
}
export default Welcome
使用方法：<Welcome name="fang" />

上面代码 this.state 读取数据，this.setState 改写数据

类组件注意事项

• this.state.n += 1 无效？
  其实 n 已经改变了，只不过 UI 不会自动更新，调用 setState 才会触发 UI 更新（异步更新），因为 React 没有像 Vue 监听 data 一样监听 state
• setState 会异步更新 UI
  setState 之后，state 不会马上改变，立马读 state 会失败，更推荐的方式是 setState( 函数 )

add(){
  this.setState( state => {
       let n = state.n + 1
        return { n }
     })
}
// 函数式setState写法
<button onClick={ () =>  this.add() }>
点我+1
</button>

• this.setState(this.state) 不推荐？
  React 希望我们不要修改旧的 state （不可变数据）
  常用代码：

  setState( { n : state.n + 1 } )

注：
这是一种理念（函数式），喜欢就用，不喜欢就用 Vue