React(2)-函数组件

目录

函数组件(无状态组件)

1.函数组件定义

2.函数组件传值

3.组件复用

4.静态组件(函数组件)，具备纯函数特点

5.单向数据流 + 组件组合案例

6.react实际项目开发流程

案例：评论模块

---

函数组件(无状态组件)

       

       

       

       

       

6.react实际项目开发流程

需求调研=>需求分析=>产品原型=>保真图(设计)

研发部门：技术经理=>技术分析(前台 后台 app 后端)

任务分解：具体模块

程序员：静态页面(html+css+js特效)=>react组件(大组件)=>组件抽离(小组件)=>获取接口数据(接口规范)=>数据同步到组件上

案例：评论模块

//头像复用

function Avator(props){

        return (

                        

        )

}

//用户信息复用

function User(props){

        return (

                       

                       
                               

张三

                        

        )

}

//评论复用

function Content(props){

        {/*评论内容*/}

        

comment content

}

//日期复用

function Date(props){

        {/*日期内容*/}

        

2022-08-20

}

//重构组件 => 获取信息 =>同步数据

var data = {

        author:{

                name:"jack",

                avator:"假装有图片地址链接"

        }，

        content:"aaa-bbb-ccc"

        date:“2022-08-20”

}

function Comment(props){

        return (
                

                       

                       

                       
                       

                

        )

}

const e =

ReactDOM.render(e,document.getElementById("app"))