React(2)-函数组件

卷心菜007

已于 2022-08-21 14:13:58 修改

阅读量135

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-08-20 20:14:41 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/126440551

版权

React 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

函数组件(无状态组件)

<body>

<div id="app"></div>

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">

1.函数组件定义

jsx=>element=>component=>component tree=>application

                function Welcome(){ [注意:react中函数首字母大小写]

return <h1>hello world</h1>

                }

                const e = <Welcome></Welcome>

2.函数组件传值

                function Welcome(props){

console.log(props);

return <h1>hello world</h1>

                }

//组件传值后，会封装组件属性 =>对象{key:value}

                const e = <Welcome name = "jack"></Welcome>

注意：组件属性不能直接放到 {} 中，会报错

                function Welcome(props){

console.log(props);

return <h1>hello world {props}</h1>

                } 报错：Objects are not valid as a React child

正确用法:

                function Welcome(props){

console.log(props);

return <h1>hello {props.name}</h1>

                }

                const e = <Welcome name = "jack"></Welcome>

3.组件复用

                function Welcome(props){

return <h1>hello {props.name}</h1>

                }

const e =

                        <div>

<h1>hello page</h1>

<Welcome />

                                <Welcome></Welcome>

<Welcome name = "jack"></Welcome>

                        </div>

babel转化：Babel · The compiler for next generation JavaScript (babeljs.io)

                const e =

                        React.createElement("div", null,

                        React.createElement("h1", null, "hello page"),

                        React.createElement(Welcome, null),

                        React.createElement(Welcome, null),

                        React.createElement(Welcome, { name: "jack"  }));

组件的虚拟DOM解析:

{

type:"div"

props:{

children:[

{

type:"h1",

props:{children:"hello page"}

},

{

type:f Welcome(props),

props:{children:"hello page"}

},

{

type: Welcome(props),

props:{}

},

{

type: Welcome(props),

props:{}

},

{

type:Welcome(props),

props:{name="jack"}

},

                                ]

                        }

                }

  虚拟DOM=>type判断(如果是函数，则自动执行，并把props传入函数)=>真实DOM

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

                 _PURE_不可改变，只返回视图

纯函数：function fn(props){} 传入相同的参数，返回相同的值

function sum(a,b){

return a+b

                }

                console.log(sum(1,2)) //属于纯函数，传入相同的值，返回的值始终相同

不纯函数：传入相同的参数，可能返回不同的值，具有可变性

let p = 0

                function sum2(){

a = ++p

return a+b

                }

console.log(sum(1,2))

console.log(sum(1,2))

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

扩展：瀑布流

//需求：school - class - teachers / students - student / teacher

function Teacher(props){

let {teacher} = props

return(

<div>

<h3>teachers {teacher}</h3>

</div>)

                }

function Student(props){

let {student} = props

return (

<div>

<h3>student {student}</h3>

</div>)

                }

                function Class(props){

let {name,teacher,students} = props.class1

return(

<div>

<h2>class : {name}</h2>

<Teacher teacher={teacher }/>

                                        <Student student={students[0]} />

                                        <Student student={students[1]}/>

                                        <Student student={students[2]}/>

</div>)

                }

function School(props){

let {name,classs} = props.school1

return(

<div>

<h1>school {name}</h1>

          <Class class={classs[0]}/>

          <Class class={classs[1]}/>

          <Class class={classs[2]}/>

</div>)

                }

//学校信息采集(学校班级老师学生) =>数据库 =>api =>client(web) =>数据传递

                let data= {

                        school:{

name:"一中"，

classs:[

{

                                                name:"一班",
teacher:"Mr.Wang",

students:["张三","李四","王二麻子"]

                                        },

{

                                                name:"二班",
teacher:"Mr.Li",

students:["张三","李四","王二麻子"]

                                        },

{

                                                name:"三班",
teacher:"Mr.Zhao",

students:["张三","李四","王二麻子"]

                                        },

                                ]

                        }

                }

const e = <School school1={data.school} / >

//ReactDOM react元素(虚拟DOM)同步(优化算法)真实DOM

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

</script>

</body>

6.react实际项目开发流程

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

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

任务分解：具体模块

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

案例：评论模块

//头像复用

function Avator(props){

return (

                        <img className = "Avatar" src="假装有图片地址链接" alt = "girl">

        )

}

//用户信息复用

function User(props){

return (

          <div className = "UserInfo">

<Avator />
          <div className = "UserInfo-name">张三</div>

                        </div>

        )

}

//评论复用

function Content(props){

        {/*评论内容*/}

        <div className = "Comment-text">comment content</div>

}

//日期复用

function Date(props){

        {/*日期内容*/}

        <div className = "Comment-date">2022-08-20</div>

}

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

var data = {

author:{

name:"jack",

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

        }，

content:"aaa-bbb-ccc"

date:“2022-08-20”

}

function Comment(props){

        return (
                <div className = "comment">

<Avatar />

<User />

<Content />
<Date />

                </div>

        )

}

const e = <Comment data={data}/>

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