React组件的应用介绍

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