React - components: Function Component

table of Contents:

    1 . Initials assembly must be capitalized
     2 . Returns a JSX
     . 3 . JSX dependent React, so the internal components need to introduce React
     . 4 Component parameter passing
        a. 传递. <Component list={ arrData }><Component>
        b. receiving. function Component (props) {...}
        . C using. const {} = List The props, List parameter data is
     5 disadvantages: [stateless component] can only achieve a very simple view display function, not own content data, there is no state, no logical processing, this does not [ ], [no] life cycle.
    . 6 . 16 later version .7 and react with a hook function provided use state. However, the new version had not recommended
  Do not render the internal function will automatically return to return the results as a result render returns [see class components must require]

js file function components:

Capitalized, have returned jsx function components

 

You can also call the function directly, realize the function component references.

 

Function can return a string in the assembly:

 

But no return value will be incorrect report:

 

Between components written content will not show up:

 

ClassName who write useless components:

 

Rendering results are as follows: there is no content components, there is no class class name

 

 

 

Independent written in js function components:

React to be introduced in order to use export function itself. code show as below

 

 

Component parameter passing:

Incoming - Crossing participation

<HotList listData={ data } testData={ data2 }></HotList>

 

接收 - 参数接收
function HotList(props){
　　console.log(props)
}

 

传入1个参数时，props打印

传入2个参数时，props打印

 

可见传入的所有参数都集合在函数的props参数中，解构出来即可引用。

 

引用 - 解构或直接引用

直接使用
console.log(props)
console.log(props.testData)

 

解构使用：

 

 

函数组件的缺点：

无状态组件
函数组件只能实现非常简单的渲染功能。只是进行页面的展示和数据的渲染。没有逻辑的处理。也就是组件的内部是没有自己的数据和状态的。它是无状态组件。
无状态组件的使用时机是当且仅当数据展示、不需要逻辑处理的时候来使用。

没有this
打印内部的this。得到undefined。
function HotList(props){
　　console.log("打印函数组件内部的this：",this)
}

没有生命周期
函数组件内部也没有生命周期。

 

总结：

函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候，需要用类组件。