首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

react中的子组件的呈现与react原生的不同吗?

在React中,子组件的呈现与React原生的方式是不同的。React中的子组件呈现是通过在父组件中使用特定的语法来实现的,而不是像React原生那样直接在父组件中编写子组件的标记。

在React中,子组件的呈现是通过在父组件的render方法中使用组件标记来实现的。父组件可以通过将子组件作为标签属性传递给子组件来呈现子组件。例如:

代码语言:txt
复制
class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <h2>Child Component</h2>;
  }
}

在上面的例子中,ParentComponent中的render方法中使用了<ChildComponent />标签来呈现子组件ChildComponent。

相比之下,React原生的方式是直接在父组件的render方法中编写子组件的标记。例如:

代码语言:txt
复制
class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <h2>Child Component</h2>
      </div>
    );
  }
}

在上面的例子中,父组件直接在render方法中编写了子组件的标记。

总结起来,React中的子组件的呈现方式与React原生的方式是不同的。在React中,子组件的呈现是通过在父组件中使用特定的语法来实现的,而不是直接在父组件中编写子组件的标记。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

不同类型 React 组件

组件引入是为了利用 JavaScript 原生类(因为 2015 年发布 ES6 提供了类语法),使得 JS 类可以在 React 中使用: import React from "react"...在此之前,类组件函数组件共存,因为函数组件在没有 Hooks 情况下,无法管理状态或处理副作用。 React 高阶组件(模式) React 高阶组件(不再推荐)曾是跨组件复用逻辑流行高级模式。...React 自定义 Hook 抽象模式可以像 Mixins、高阶组件 (HOC)、以及 Render Prop 组件那样,将可复用业务逻辑提取出来供不同组件使用。...这种方式可以将逻辑封装,并在任意函数组件复用,是目前 React 推荐组件共享逻辑最佳方式。...客户端组件不同,服务器组件无法使用 React Hooks 或其他 JavaScript 功能(如事件处理),因为它们是在服务器端运行

7910

react组件向父组件传递数据_react组件改变父组件状态

大家好,又见面了,我是你们朋友全栈君。...本博客代码是 React组件组件相互传值 demo;实现封装一个折线图,折线图选择下拉框,获取下拉框点击值并且传给父组件根据下拉框筛选条件更新视图;效果图如下: 父组件代码: 代码解析:...父组件 Parent 引用组件 Sub ,传递了 list 组件组件,并且接收组件传递给父组件 storeId ; import React, { Component } from 'react...{'storeId':1,'name':'li'},{'storeId':2,'name':'jay'}], }; storeId=(value)=> { console.log('组件传递给父组件值...如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

3.6K30
  • 3、React组件this

    React组件this是什么 通过编写一个简单组件,并渲染出来,分别打印出自定义函数和renderthis: import React from 'react'; const STR = '被调用...这段代码形象验证了,JavaScript函数this不是在函数声明时候,而是在函数运行时候定义; 同样,React组件也遵循JavaScript这种特性,所以组件方法‘调用者’不同会导致...this不同(这里 “调用者” 指的是函数执行时的当前对象) “调用者”不同导致this不同 测试:分别在组件自带生命周期函数以及自定义函数打印this,并在render()方法中分别使用this.handler...,可以自动绑定所用方法,使得其this指向组件实例化对象,但是其他JavaScript类并没有这种特性; 所以React团队决定不再React组件实现自动绑定,把上下文转换自由权交给开发者;...,即onClick={this.handler}打印出来组件实例; 总结: React组件生命周期函数this指向组件实例; 自定义组件方法this会因调用者不同不同; 为了在组件自定义方法获取组件实例

    2.9K10

    React组件

    React组件 React提供了一种基于浅比较模式来确定是否应该重新渲染组件React.PureComponent,通常只需要继承React.PureComponent就可以定义一个纯组件。...React.PureComponentReact.Component很相似,两者区别在于React.Component并未实现shouldComponentUpdate(),而React.PureComponent...组件区别就是React.PureComponent以浅层对比prop和state方式来实现了shouldComponentUpdate()函数。...此外React.PureComponentshouldComponentUpdate()将跳过所有组件prop更新,因此需要确保所有组件也都是纯组件。...隔离了父组件组件状态变化。 缺点 shouldComponentUpdateshadow diff同样消耗性能。 需要确保组件渲染仅取决于propsstate。

    2.5K10

    React高阶组件

    React高阶组件 高阶组件HOC即Higher Order Component是React中用于复用组件逻辑一种高级技巧,HOC自身不是React API一部分,它是一种基于React组合特性而形成设计模式...,在反向继承我们可以做非常多操作,修改state、props甚至是翻转Element Tree,反向继承有一个重要点,反向继承不能保证完整组件树被解析,也就是说解析元素树包含了组件(函数类型或者...Class类型),就不能再操作组件组件了。...,相互耦合,不利于代码维护,此外不同Mixin方法可能会相互冲突。...diff算法使用组件标识来确定它是应该更新现有子树还是将其丢弃并挂载新子树,如果从render返回组件前一个渲染组件相同===,则React通过将子树新子树进行区分来递归更新子树,如果它们不相等

    3.8K10

    React基础(5)-React组件数据-props

    将一个大应用按照功能结构等划分成若干个部分(组件),对每个部分(组件)进行分开管理,组件相关东西放在一起,达到高内聚目的,而不同组件又各自独立管理达到低耦合效果。...,不过原生HTML标签属性值都是字符串,即使是内嵌js表达式,也依然是字符串,而在React,prop属性值类型可以任何数据类型(基本数据类型(number,String,null等函数)或者对象..." />, container); 从上面的代码,可以看得出,父组件JSXprop值可以是一个方法,在组件想要把数据传递给父组件时,需要在组件调用父组件方法,从而达到了组件向父组件传递数据形式...这种间接操作方式在React中非常重要.当然你看到上面把子组件组件放在一个文件当中,或许看得不是很舒服,你可以把子组件单独抽离出去,通过Es6export,import导出导入方式是可以...总结 本文主要讲述了React组件数据属性-props,它类似HTML标签属性,但属性值可以是任意数据类型,数字number,字符串String,甚至函数,对象 并且要注意函数式声明(无状态)组件

    6.7K00

    React基础(6)-React组件数据-state

    如何划分组件状态数据,进行自我灵魂拷问,以及propsstate灵魂对比 那么本节就是你想要知道 Reactstate 一个组件最终渲染数据结果,除了prop还有state,state代表是当前组件内部状态...,你可以把组件看成一个'状态机",它是能够随着时间变化数据,更多是应当在实现交互时使用,根据状态state改变呈现不同UI展示 在React,因为不能直接修改外部组件传入prop值 当需要记录组件自身数据变化时...如果是React控制事件处理程序以及在它钩子(生命周期)函数内调用setState,它不会同步更新state 也就是说:React控制之外事件调用setState是同步更新,例如原生js绑定事件...灵魂对比 共同点: 都是组件数据,是一普通javascript对象,都是用来保存信息,这些信息可以控制组件形态 不同点: props是由父组件传入(类似形参),用于定义外部组件接口,是React...组件输入,它是从父组件传递给组件数据对象,在父(外部)组件JSX元素上,以自定义属性形式定义,传递给当前组件,而在组件内部,则以this.props或者props进行获取 props只具备读能力

    6.1K00

    React学习(五)-React组件数据-props

    (组件),对每个部分(组件)进行分开管理,组件相关东西放在一起,达到高内聚目的,而不同组件又各自独立管理达到低耦合效果。...,不过原生HTML标签属性值都是字符串,即使是内嵌js表达式,也依然是字符串,而在React,prop属性值类型可以任何数据类型(基本数据类型(number,String,null等函数)或者对象..." />, container); 从上面的代码,可以看得出,父组件JSXprop值可以是一个方法,在组件想要把数据传递给父组件时,需要在组件调用父组件方法,从而达到了组件向父组件传递数据形式...这种间接操作方式在React中非常重要.当然你看到上面把子组件组件放在一个文件当中,或许看得不是很舒服,你可以把子组件单独抽离出去,通过Es6export,import导出导入方式是可以...结语 本文主要讲述了React组件数据属性-props,它类似HTML标签属性,但属性值可以是任意数据类型,数字number,字符串String,甚至函数,对象 并且要注意函数式声明(无状态)组件

    3.4K30

    React学习(六)-React组件数据-state

    如何划分组件状态数据,进行自我灵魂拷问,以及propsstate灵魂对比 那么本节就是你想要知道 Reactstate 一个组件最终渲染数据结果,除了prop还有state,state代表是当前组件内部状态...,你可以把组件看成一个'状态机",它是能够随着时间变化数据,更多是应当在实现交互时使用,根据状态state改变呈现不同UI展示 在React,因为不能直接修改外部组件传入prop值 当需要记录组件自身数据变化时...如果是React控制事件处理程序以及在它钩子(生命周期)函数内调用setState,它不会同步更新state 也就是说:React控制之外事件调用setState是同步更新,例如原生js绑定事件...灵魂对比 共同点: 都是组件数据,是一普通javascript对象,都是用来保存信息,这些信息可以控制组件形态 不同点: props是由父组件传入(类似形参),用于定义外部组件接口,是React...组件输入,它是从父组件传递给组件数据对象,在父(外部)组件JSX元素上,以自定义属性形式定义,传递给当前组件,而在组件内部,则以this.props或者props进行获取 props只具备读能力

    3.6K20

    组件传对象给父组件_react组件改变父组件状态

    大家好,又见面了,我是你们朋友全栈君。...组件传值给父组件 首先 组件组件名“Child”)内定义一个方法 例如 sendData = () => { let data = ‘1234’; this.props.getData(data...); //这个this,props.xxx 后面的xxx是是在父组件那使用名字; }, 然后可以在render函数后使用这个方法或者另外定义一个事件去触发该方法进行传值, 之后可在父组件(Parent...)内使用这个方法获取拿到值: Parent组件内:首先定义一个方法getData或者其他什么都可以随便取 ,这里this.getData这个方法是你随便取那个,例如getData=this.xxx...都可以,但是你这里是this.xxx,父组件内定义方法就必须名字叫xxx, 然后就是 xxx = (data) => { console.log(data); //此时就会打印 组件传给父组件

    2.8K30

    React基础(8)-React组件生命周期

    ,做着不同事情 在React编写组件,每个组件在网页中都有被创建,更新,删除这么一过程,就像有机生命体一样 理解生命周期函数对于编写React组件代码是非常重要 如果你不清楚生命周期,以及生命周期应用场景...:可以对照这个完整生命周期图谱 image.png 组件装载(Mount):React组件第一次在DOM树渲染过程 componentWillMount:组件即将被挂载,在Render方法之前调用...组件卸载(unmount): 组件从DOM删除过程 componentWillUnmount: 组件从页面销毁时,会触发该函数,当需要对数据进行清理时,例如定时器清理,放到该函数里面去做 三种不同过程...,nextState):只要父组件render函数被调用,在render函数里面被渲染组件就会经历更新过程,无论父组件传给组件props有没有改变,都会触发组件componentWillReceiveProps...生命周期,不同版本,官方对它做了一些优化和改动,这里介绍React Version 16.2.0版本,生命周期过程图如下所示 image.png 如果是最新,在React17.0版本,生命周期函数如下所示

    2.2K20

    React学习(八)-React组件生命周期

    ,一个人生,老,病,死.在每个特殊年龄阶段,做着不同事情 在React编写组件,每个组件在网页中都有被创建,更新,删除这么一过程,就像有机生命体一样 理解生命周期函数对于编写React组件代码是非常重要...componentWillUnmount: 当组件对应 DOM 元素从页面删除之前调用 组件更新(update): 当组件被重新渲染过程(stateprops发生改变都会引起渲染) componentWillReceiveProps...: 组件从页面销毁时,会触发该函数,当需要对数据进行清理时,例如定时器清理,放到该函数里面去做 三种不同过程,React库会依次调用组件一些成员函数(生命周期函数) 组件装载过程 当组件第一次被渲染时候...,nextState):只要父组件render函数被调用,在render函数里面被渲染组件就会经历更新过程,无论父组件传给组件props有没有改变,都会触发组件componentWillReceiveProps...生命周期,不同版本,官方对它做了一些优化和改动,这里介绍React Version 16.2.0版本,生命周期过程图如下所示 ?

    1.6K20

    React dumb 组件和 smart 组件

    很快就会接触到组件(Component)概念,正是这一概念让 React 脱颖而出。...创建不同组件并将它们嵌套在一起,就能构建出一个应用。听起来再简单不过了,但真实情况还会更复杂些。有两种不同类型组件,称之为 smart 组件和 dumb 组件。...容器组件需要管理自身繁复生命周期,并负责将数据作为 props,向下传递给展示型组件。 smart 组件是基于类,并在 constructor() 函数定义自身 state。...,用于升级 state 并变成 props 传递给组件。...应用组件就是一个很好 smart 组件范例,经常负责管理整个应用若干个 state 片段,并需要将附加功能下发到其组件,从而实现用户交互时 state 能被更新。

    2.5K10

    React Native是怎么渲染出原生组件

    在开始研究这个问题之前,我们缕一下我们困惑: ReactReact Native 和 native 关系 React Native 开始渲染逻辑入口 React Native 是怎么更新 UI...在 CreateView 加个断点则会发现,Text 组件其实在 js 端创建了不同节点,一个Text包括 1个 RCTRawText 和 1个 RCTText ,那么这时候就有一个疑惑了,**为什么创建...); 在 SetChildrenOperation 执行操作: 这里会找到root表示parent和我们要添加children view,把 children 添加到 root 里面去。...calculate 方法来计算布局 递归更新组件。...简单总结就是 js 把 virtual dom结构发给了 native 端, native 利用 Yoga 能力比较高效计算出 View 实际位置。然后把 View 最终呈现在屏幕上。

    2.4K30

    React入门四:React组件使用

    ---- 这是我参与8月更文挑战第三天 1.组件介绍 使用React就是在使用组件 组件表示页面部分功能 组合多个组件实现完整页面功能 特点:可复用、独立、可组合 2....React.Component父类,从而可以使用父类中提供方法或属性 约定3:类组件必须提供render() 方法 约定4:render()方法必须有返回值 表示该组件结构 class Hello...选择1:将所有组件都写在一个js文件 选择2:将所有组件都放到单独js文件 组件作为一个独立个体,一般会放到一个单独js文件。...创建Hello.js 在Hello.js中导入React 创建组件(函数 或 类) 在Hello.js中导入该组件 在index.js中导入Hello组件 渲染组件 hello.js import React...) } } // 导出 export default Hello; index.js // ES6 模块化语法 import React from 'react'; import ReactDOM

    1.3K30

    React组件本质

    原文始发于我博客 也许你已经使用React很长时间了,你使用优雅jsx语法和React hooks来构建组件,最终构成页面。...然而,为什么我们只需要编写一些声明式组件React就可以管理它自己? 进一步而言,我们每天编写组件到底是什么?...('p', null, 'foo', React.createElement('span', null, 'bar') ) } 在React元素创建过程, 他将递归地创建所有的元素...所以一个组件渲染过程其实就是一次函数调用。 这就是为什么在前面的例子我们每一秒都会得到App和Text。 组件状态更新导致了组件重新渲染,触发了函数调用。...例如ReactDOM将React元素转换为dom元素,React Native将React元素转换为原生控件。 你甚至可以直接把元素打印在屏幕上,这样你就创造了一个"打印渲染器"。

    1.4K31

    React组件通信几种方式

    需要组件之进行通信几种情况 父组件组件通信 组件向父组件通信 跨级组件通信 没有嵌套关系组件之间通信 1....父组件组件通信 React数据流动是单向,父组件组件通信也是最常见;父组件通过props向组件传递需要信息 Child.jsx import React from 'react'; import...组件向父组件通信 利用回调函数 利用自定义事件机制 回调函数 实现在组件中点击隐藏组件按钮可以将自身隐藏功能 List3.jsx import React, { Component } from...使用context 下面例子组件关系: ListItem是List组件,List是app组件 ListItem.jsx import React, { Component } from 'react...React组件间通信几种方式

    2.3K30
    领券