React 进阶之路 四 ( 函数式组件 和 类组件 )

函数式组件：比较简单一般用于静态没有交互事件内容的组件页面
类组件：又称为动态组件，一般用于有交互事件或数据修改的组件页面

# 函数式组件

function ChildFn(props) {
  let fbt = <h2>我是副标题</h2>
  let isShowtTxt = 100 > 99 ? '显示Txt' : '隐藏Txt';
    return <React.StrictMode>
        <h1>我是函数式组件</h1>
        {fbt}
        <h3> {isShowtTxt } </h3>
    </React.StrictMode>
}

函数式组件就是函数，即可以 写逻辑 和 定义变量 等函数可以操作的所有操作；

# 类组件

class HelloFn extends React.Component{
    render(){
        return <React.StrictMode>
            <h1> 我是类组件 </h1>
            <ChildFn />
        </React.StrictMode>
    }
}

在根上渲染组件

ReactDOM.render(
    <HelloFn />,
    document.getElementById('root')
);

这个就是在 类组件 中调用了 函数式组件，即复合组件;