react component function组件使用详解

目录
  • 不可改变性
  • 虚拟dom与真实dom
  • 函数组件
  • 组件复用
  • 纯函数
  • 组件组合--组件树
  • 组件抽离

不可改变性

1.jsx-

2.component(function)-component(class)-components(函数组件组合)-component tree(redux)-app(项目开发)

在react中,创建了js对象(react元素)就是不可更改的(immutable)。就像是用相机拍照,相当于在此时间点已经定位了时间节点,只能拍下一张照片。

例如,使用底层react写一个时钟。

<div id="app"></div>
new Date().toLocalTimeString() //获取当前时间
var e =  <h1>time:{new Date().toLocaleTimeString()}</h1>
ReactDOM.render(e,document.getElementById("app"))

以上,无法实时更新最新的时间。

但是换种方法写:

  function tick() {
            //创建新的元素,同步元素到容器。
            var e = <div>
                <h1>Clock</h1>
                <h1>time:{new Date().toLocaleTimeString()}</h1>
            </div>
            // e1 e2,虚拟dom之间的比较,看看到底哪里发生了变化。
            //同步到容器元素
            ReactDOM.render(e, document.getElementById("app"))
        }
       setTimeout(tick(), 1000);

虚拟dom与真实dom

  • 创建元素并打印

已知jsx语法创建的本质就是普通js对象,打印的结果为虚拟dom。

例如

 var e = <div className="title" style={{ color: "red" }}>hello</div>
 打印e。

但如果打印真实dom

var tDOM = document.querySelector('title');
console.dir(tDOM)

获得的结果为

由此可见,虚拟dom比真实dom的开销要小,这也是浏览器中性能优化方法之一,减少重绘面积,减少重绘次数。

函数组件

 function Welcome(props) {
            console.log(props)
            return <h1>hello world</h1>
        }
  const e = <Welcome name='jack'></Welcome>

输出对象:

 function Welcome(props) {
            const {name} = props
            return <h1>hello {name}</h1>
        }
        const e = <Welcome name='jack'></Welcome>

输出 hello jack

组件复用

当函数组件被多次使用在不同场景时,中间的内容会被react自动赋予chilren属性。如下:

 function Welcome(props) {
             const {chilren,name}=props
            return <h1>hello,{children},{name}</h1>
 }
 const e =
            <div>
                <Welcome />
                <Welcome>aa</Welcome>
                <Welcome name="jack">bb</Welcome>
            </div>

拿bb举例子来说,props中children='bb',name="jack"

自动执行函数,同时props传入函数,然后真实DOM渲染在容器中。

纯函数

纯函数:普通函数function fn(props){return value},传入相同的值,返回值不能改变。

 function sum(a, b) {
            return a + b
 }
 console.log(1,2)
 console.log(1,2)
 console.log(1,2)

不是纯函数:传入相同的值,返回值可能改变

 let p = 0;
 function sum(a, b) {
 a = p++;
 return a + b
}
 console.log(1,2)
 console.log(1,2)
 console.log(1,2)

组件组合--组件树

业务模块,学校-班级-教师-学生

依靠props传递数据,基于props引申出单向数据流的概念,从上到下数据流动,即school-student

 let data = {
            school: {
                name: '一中',
                classes: [
                    {
                        name: 'YI班',
                        teacher: 'Mr.Wang',
                        students: [
                            {
                                name: '小红1',
                                age: 18
                            },
                            {
                                name: '小红2',
                                age: 18
                            },
                            {
                                name: '小红3',
                                age: 18
                            },
                        ]
                    },
                    {
                        name: 'ER班',
                        teacher: 'Mr.Li',
                        students: [
                            {
                                name: '小红4',
                                age: 18
                            },
                            {
                                name: '小红5',
                                age: 18
                            },
                            {
                                name: '小红6',
                                age: 18
                            },
                        ]
                    },
                    {
                        name: 'SAN班',
                        teacher: 'Mr.Zhang',
                        students: [
                            {
                                name: '小红7',
                                age: 18
                            },
                            {
                                name: '小红8',
                                age: 18
                            },
                            {
                                name: '小红9',
                                age: 18
                            },
                        ]
                    },
                ]
            }
        }
        //--定义组件(组件及关系)
        //-定义几个组件?
        function Student(props) {
            return <div>学员名</div>
        }
        function Teacher(props) {
            return <div>老师名</div>
        }
        function Class(props) {
            return <div>
                <h2>班级名</h2>
                <Teacher />
                <Student />
                <Student />
                <Student />
            </div>
        }
        function School(props) {
            return <div>
                <h2>学校名</h2>
                <Class />
                <Class />
                <Class />
            </div>
        }
        //-组件关系?
        //--根组件定义
        const e = <School data="data.school" />

显示:

需求:将数据传入根组件中,然后依次传向子组件,形成数据流。

代码实现:

  function Student(props) {
            const {StudentData} = props
            return <div>
                学员名:{StudentData[0].name},age:{StudentData[0].age};
                学员名:{StudentData[1].name},age:{StudentData[1].age};
                学员名:{StudentData[2].name},age:{StudentData[2].age}
                </div>
        }
        function Teacher(props) {
            const {TeacherName} = props
            return <div>{TeacherName}</div>
        }
        function Class(props) {
            const { classes } = props
            return <div>
                <h2>班级名{classes.name}</h2>
                <Teacher TeacherName={classes.teacher}/>
                <Student StudentData={classes.students}/>
                <Student StudentData={classes.students}/>
                <Student StudentData={classes.students}/>
            </div>
        }
        function School(props) {
            // console.log(props)
            const { schoolData } = props
            return <div>
                <h2>学校名{schoolData.name}</h2>
                <Class classes={schoolData.classes[0]} />
                <Class classes={schoolData.classes[1]} />
                <Class classes={schoolData.classes[2]} />
            </div>
        }
        //--根组件定义
        const e = <School schoolData={data.school} />

界面显示:

中秋节快乐,阖家团圆,团团圆圆,捉住中秋的尾巴,23:55.晚安

更新

组件抽离

一个项目被接单后由项目组长进行项目分析然后将任务分解给成员,通常react中有多个组件被分别书写。这就涉及到了必不可少的项目拆分。

从后台接口返回的json数据要渲染在前台的页面上,通常是利用到props进行传值。

例如

function Compo(){
}
var data = {
    user:{
        name:"小红",
        age:"18"
    },
    hobby:"吃饭"
}
 ReactDOM.render(<Compo  />, document.getElementById("app"))

想要将data中的数据在函数组件中使用,于是在封装组件处传入

同时在function Compo(props)处书写props来传递json数据。并利用解构赋值来获取data中的每一项数据key值

function Compo(props){
    const {user,hobby} = props.data
}
var data = {
    user:{
        name:"小红",
        age:"18"
    },
    hobby:"吃饭"
}
 ReactDOM.render(<Compo data={data} />, document.getElementById("app"))

此时已经获取到了data中大致数据,进一步想要将用户名称,年龄,爱好,封装成三个不同的函数组件。于是书写:

        function User(props) {
            return <div>用户名</div>
        }
        function Content(props) {
            return <div>爱好</div>
        }

进一步如何将根组件Compo中数据流向子组件User与Content中。

function User(props) {return <div>用户名</div>}
function Content(props) {return <div>爱好</div>}
function Compo(props){
    const {user,hobby} = props.data
    return <div><User></User><Content></Content></div>
}

通过同样的方式 在User组件与Content组件中通过props传入数据。

function User(props) {
const {userData} = props.userData
return <div>{userData.name} {userData.age}</div> //即可获得到name 与 age.
}
const {user,hobby} = props.data
return <div><User userData={user}></User></div>

以上就是react component function组件使用详解的详细内容,更多关于react component function的资料请关注我们其它相关文章!

(0)

相关推荐

  • React 高阶组件与Render Props优缺点详解

    目录 高阶组件 增强型高级组件 注入型高阶组件 高阶组件 VS Render Props 总结 高阶组件 高阶组件(HOC)是一个接受组件作为参数并返回一个新组件的函数,如果多个组件有相同的逻辑,将这些逻辑用函数封装,使它们能跨组件共用,这种用法称为高阶组件.下面的代码演示什么是高阶组件: export default function WithPrintLog(InnerComponent) { return class extends React.Component{ componentDi

  • React可定制黑暗模式切换开关组件

    目录 正文 如何使用它. 1.安装和下载 2.导入DarkModeToggle组件 3.将黑暗模式切换添加到应用程序中 4.默认的组件道具 预览 正文 一个用于React的可定制的黑暗模式切换开关组件. 如何使用它. 1.安装和下载 npm install @anatoliygatt/dark-mode-toggle @emotion/react @emotion/styled 2.导入DarkModeToggle组件 import { useState } from 'react'; impo

  • React元素与组件的区别示例详解

    目录 从问题出发 元素与组件 元素 组件 问题如何解决 自定义内容 第一种实现方式 第二种实现方式 第三种实现方式 从问题出发 我被问过这样一个问题: 想要实现一个 useTitle 方法,具体使用示例如下: function Header() { const [Title, changeTitle] = useTitle(); return ( <div onClick={() => changeTitle('new title')}> <Title /> </div

  • 可定制React自动完成搜索组件Turnstone实现示例

    目录 正文 特点 如何使用它 1.安装并导入Turnstone 2.基本使用方法 3.默认的组件道具 预览 正文 一个高度可定制的.易于使用的React自动完成搜索组件. 特点 轻量级的React搜索框组件 用可定制的标题将来自多个API或其他数据源的搜索结果分组 指定列表框选项的最大数量,以及每组的加权显示比例 用你自己的React组件完全定制列表框选项.添加图片.图标.额外的子选项.按组或索引的不同视觉处理等等...... 在输入的文本下面显示typeahead自动建议文本 使用各种CSS方

  • React Native可定制底板组件Magic Sheet使用示例

    目录 正文 如何使用它 1.安装并导入 2.基本使用方法 预览 正文 一个React Native组件,通过提供一个强制性的API,可以从应用程序的任何地方(甚至在组件之外)调用,以显示一个完全可定制的底部表单,并能够等待它解决并得到一个响应. 这个库依赖于Gorhom的/bottom-sheet 的模态组件,并接受相同的道具和儿童. 如何使用它 1.安装并导入 # Yarn $ yarn add react-native-magic-sheet # NPM $ npm i react-nati

  • 可定制react18 input otp 一次性密码输入组件

    目录 正文 主要特点 基本用法 1.安装和导入 2.将OtpInput组件添加到应用程序中 3.所有默认的道具 预览 正文 一个完全可定制的.用于React驱动的应用程序的一次性密码(OTP).电话号码和pin码输入组件. 主要特点 它在React和ionic应用程序上都很好用.在手机上也能正常工作. 你可以用inputNum道具只指定数字输入. 在网页和手机上与剪贴板粘贴功能完美配合. npm上唯一支持'enter'键提交的OTP输入包. 在Android上没有OTP粘贴问题. 在iOS ch

  • react component function组件使用详解

    目录 不可改变性 虚拟dom与真实dom 函数组件 组件复用 纯函数 组件组合--组件树 组件抽离 不可改变性 1.jsx- 2.component(function)-component(class)-components(函数组件组合)-component tree(redux)-app(项目开发) 在react中,创建了js对象(react元素)就是不可更改的(immutable).就像是用相机拍照,相当于在此时间点已经定位了时间节点,只能拍下一张照片. 例如,使用底层react写一个时钟

  • js中自定义react数据验证组件实例详解

    我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息.如果用户修正了数据,我们还要将提示信息隐藏起来. 有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件.使用起来很简单,例如我下面的这一段代码: ko.validation.locale('zh-CN');

  • React中父子组件通信详解

    目录 父组件向子组件通信 存在期 父组件向子组件通信 在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类 子组件是作为属性来接收这些数据的 第一类就是数据:变量,对象,属性数据,状态数据等等 这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式 注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种 作为事件回调函数执行 参数默

  • React封装CustomSelect组件思路详解

    目录 思路和前提 编码与实现 处理createContext与useContext 对content的封装和拆分: DispatchRender, Controls 先说Controls, 包含控制行: 重置, 确定 DispatchRender 用于根据type分发对应的render子组件,这是一种编程思想,在次可以保证父子很大程度的解耦,再往下子组件不再考虑type是什么,父组件不需要考虑子组件有什么. 单选框的render子组件的具体实现 由来: 需要封装一个通过Popover弹出框里可以

  • React Fragment介绍与使用详解

    目录 前言 Fragments出现动机 React Fragment介绍与使用 <React.Fragment> 与 <>区别 前言 在向 DOM 树批量添加元素时,一个好的实践是创建一个document.createDocumentFragment,先将元素批量添加到 DocumentFragment 上,再把 DocumentFragment 添加到 DOM 树,减少了 DOM操作次数的同时也不会创建一个新元素. 和 DocumentFragment 类似,React 也存在

  • React团队测试并发特性详解

    目录 引言 遇到的困境 1. 如何表达渲染结果? 2. 如何测试并发环境? React的应对策略 实现一个渲染器 如何测试并发环境? 总结 引言 React18进入大家视野已经有一段时间了,不知道各位有没有尝试并发特性呢? 当启用并发特性后,React会从同步更新变为异步.带优先级.可中断的更新. 这也为编写单元测试带来了一些难度. 本文来聊聊React团队如何测试并发特性. 遇到的困境 主要有两个问题需要面对. 1. 如何表达渲染结果? React可以对接不同宿主环境的渲染器,大家最熟悉的渲染

  • 通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

  • vue实现简单表格组件实例详解

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩

  • Vue 短信验证码组件开发详解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn

  • Vuejs 单文件组件实例详解

    在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非常明显了: 字符串模板:缺乏高亮,书写麻烦,特别是 HTML 多行的时候,虽然可以将模板写在 html 文件中,但是侵入性太强,不利于组件解耦分离. 不支持CSS:意味着当 HTML 和 JavaScript 组件化时,CSS明显被遗漏了 没有构建步骤:限制只能使用 HTML 和 ES5 JavaScript,而不能使用

随机推荐