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