import React, { Component } from 'react'
// 定義函數組件  如果你安裝了jsx插件，則可以通過 【rfc】 完成創建
// 1.使用js中的定義函數
// 2.函數名稱，首字母大寫
// 3.必須要有jsx/null返回值，如果是jsx則一定要有頂層元素包裹
const App = () => {
  return (
    <div>
      <h3>我是一個App函數組件</h3>
    </div>
  )
}
export default App

import React, { Component } from 'react'
// 定義類組件  如果你安裝了jsx插件，則可以通過 【rcc】來創建類組件
// 1.要以es6的定義類來定義 ，必須以class定義類
// 2.此類必須要繼承父類[Component]
// 3.此類必須要有一個成員方法 render，此方法中必須要返回jsx/null,如果是jsx必須要有頂層元素
class App extends Component {
  render() {
    return (
      <div>
        <h3>App之類組件</h3>
      </div>
    )
  }
}
export default App

import React, { Component } from 'react'
// 函數組件間的通信
// 子組件通過入參 props來接收 父組件傳過來的數據  props它是一個對象
const Child = props => {
  let {title} = props
  console.log(props)
  return (
    <div>
      <h3>Child組件 -- {title}</h3>
    </div>
  )
}
// 標準寫法
// const Child = ({ title = '默認值', fn }) => {
//   console.log(fn())
//   return (
//     <div>
//       <h3>Child組件 -- {title}</h3>
//     </div>
//   )
// }
const App = () => {
  // 在react中的方法，先定義后調用
  const fn = () => {
    return 'fn'
  }
  return (
    <div>
      <h3>App組件</h3>
      {/* 通過自定義屬性，可以向子組件傳遞數據 ，此數據它是單向數據流，子組件不能直接修改 */}
      <Child title="hello" num={100} obj={{ id: 1 }} fn={fn} />
      {/* <Child /> */}
    </div>
  )
  // function fn() {
  //   return 'function'
  // }
}
export default App

import React, { Component } from 'react'
// 類組件 父傳子
// 子組件它是通過 成員屬性this.props來接受
class Child extends Component {
  render() {
    // 得到父組件傳過來的自定義屬性數據
    let { title = '默認值', fn } = this.props
    console.log(fn())
    return (
      <div>
        <h3>Child組件 -- {title}</h3>
      </div>
    )
  }
}
class App extends Component {
  fn = arg => () => 'fn@@@ -- ' + arg
  render() {
    return (
      <div>
        <h3>App</h3>
        {/* 注意:子組件中打印時會調用函數,所以這里傳的值一定得是函數,而不是執行函數過后的數據 */}
        <Child title="我是標題" fn={this.fn(200)} />
      </div>
    )
  }
}
export default App