react（十）函数式组件

函数式组件

• 函数式组件，本质就是一个常规函数，接收一个参数 props 并返回一个 reactElement
• 函数式组件中没有this和生命周期函数,不能使用 string ref
• 使用函数式组件时，应该尽量减少在函数中声明子函数，否则，组件每次更新时都会重新创建这个函数

App.js

import React from 'react';
import Child from './child';
function App() {
  return <div>
      <h1>hello React</h1>
      <Child 
        content={"小陈"}
      />
  </div>;
}
export default App;

child.js

import React from 'react';
/*
  函数式组件（无状态组件|纯渲染组件）
    return 返回我们要构建的视图
    在 React 16.7 之前函数式组件没有 state 也没有生命周期
    函数组件在组件更新时，是将整个函数重新执行  
*/
function Child(props) {
  let {content} = props;
  return <div>
    <h1>你好，{content}</h1>
  </div>;
}
export default Child;