React初体验

函数组件

function welcome(props){
return (<div>hello,{props.name}</div>) 
}
//使用方法
<Welcome name = '小红' />

类组件

class welcome extends React.Component
{
    render(){
        return (<div>hello,{this.props.name}</div>)
    }
}
//使用方法
<Welcome name = '小李' />

这里我们简单的说一下上面的<Welcome /> 会被翻译成什么

再React中 <div />会被翻译成React.createElement("div")

<Welcome />会被翻译为React.createElement(Welcome)

这里我们也来说一下React.createElement的逻辑

• 如果传入字符串 'div',则会创建一个div
• 如果传入一个函数，则会调用该函数，并且获取其返回值
• 如果传入一个类，则在这个类的前面添加个new(这里会执行constructor)，获取一个组件对象，然后调用对象的render方法，获取其返回值。

小试牛刀

下面我将分别用函数组件和类组件来实现一个加一功能的按钮

函数组件：

import React,{useState} from 'react'
import ReactDOM from 'react-dom'
const root = document.getElementById('root')
const App = () =>{
    const [n,setN] = useState(0)
    const onClick = () =>
    {
        setN(n+1)
    }
    return (	<> 
        <div>{n}</div>
        <button onClick = {onClick}>+1</button></>)
}
ReactDOM.render(<App />,root)

虽然这只是一个简单的加一按钮，但是这里确有着很多值得我们注意的地方

• 使用useState(0)会返回两个参数，一个是读取数据的Api，一个修改数据的Api，而括号里面的数字则表示初始值；例如

  const [n,setN] = useState(0)
  //n表示读取数据的接口，setN表示修改数据的接口，初始值为0，注意，这里的n和setN是可以随便命名的。
  
  

类组件：

import React from 'react'
import ReactDom from 'react-dom'
const root = document.getElementById('root')

class App extends React.Component {
    constructor(props){
        super()
        this.state = {
            n:0
        }
    }
    onClick = () =>{
        this.setState((state)=>{
            return {n:state.n+1}
        })
    }
    render(){
       return (<> <div>{this.state.n}</div>
           <button onClick = {this.onClick}>+1</button></>)
    }
}
ReactDOM.render(<App />,root)

这样，一个简单的加一按钮就分别用函数组件和类组件实现了,值得注意的是因为在React中没有监听数据得变化因此当数据发生变化时ui并不会更新，所以在类组件中使用 setState 来修改数据，函数组件中使用 useState 来修改数据，setState 和 useState会在修改数据后重新渲染页面，