函数组件

创建方式

//三种写法
//写法一
const Hello = (props) => {
    return <div>{props.message}</div>
}
//写法二
const Hello = props => <div>{props.message}</div>
//写法三
function Hello(props){
    return <div>{props.message}</div>
}

在react16.8以前函数组件只能被动接收外部数据，并且没有自己的生命周期钩子函数，函数内部也没有this可用

function FuncComp (props) {
  const { name, changeName } = props;//这里的形参props即当前函数组件接受的外部属性
  return (
    <div>我叫：{name} <button onClick={changeName}>点我修改名字</button></div>
  )
}
//使用函数组件的时候和类组件一样，都是通过标签去实例化 
//<FuncComp name="张三" changeName={()=>{}}/>
//函数组件的使用方式和类组件一样
class App extends React.Component {
  state = {
    name: "张三"
  }
  changeName = () => {
    this.setState({ name: '李四' });
  }
  render () {
    const { name } = this.state;
    return <FuncComp name={name} changeName={this.changeName} />
  }
}

函数组件替代 class 组件

• 函数组件没有 State
  • 使用 API 中的 useState 代替
• 函数组件没有生命周期
  • 使用 Hooks API
    • 其中一个 useEffect 代替

useState
useEffect