网站首页 > 技术文章 正文
React 是一个声明式,高效且灵活地用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。
一个组件接收一些参数,我们把这些参数叫做 props(“props” 是 “properties” 简写),然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。
render 方法的返回值描述了你希望在屏幕上看到的内容。React 根据描述,然后把结果展示出来。更具体地来说,render 返回了一个 React 元素,这是一种对渲染内容的轻量级描述。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法,JSX 可以让你更轻松地书写这些结构。语法 <div /> 会被编译成 React.createElement('div')。
在 JSX 中你可以任意使用 JavaScript 表达式,只需要用一个大括号把表达式括起来。每一个 React 元素事实上都是一个 JavaScript 对象,你可以在你的程序中把它当保存在变量中或者作为参数传递。
组件只会渲染一些内置的 DOM 组件,如<div />、<li />等。但是你也可以组合和渲染自定义的 React 组件
在 React 应用中,数据通过 props 的传递,从父组件流向子组件。
可以通过在 React 组件的构造函数中设置 this.state 来初始化 state。this.state 应该被视为一个组件的私有属性。
每次在组件中调用 setState 时,React 都会自动更新组件,包括子组件,本质是调用该组件的render函数。
当你遇到需要同时获取多个子组件数据,或者两个组件之间需要相互通讯的情况时,需要把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。
参考链接:
https://react.docschina.org/tutorial/tutorial.html#
setup-option-2-local-development-environment
猜你喜欢
- 2025-05-23 React 18:新玩具、新陷阱以及新可能性
- 2025-05-23 第395期Web技术日报(2016-01-22) 使用 React 的一些经验
- 2025-05-23 React 组件渲染慢到崩溃?5 大实战技巧让页面流畅度飙升 80%!
- 2025-05-23 React 入门:从 JavaScript 到 React
- 2025-05-23 前端跳槽突围课:React18底层源码深入剖析(21章完整版)
- 2025-05-23 突发!React官方正式弃用CRA!Next.js、Remix、Vite迁移指南
- 2025-05-23 用JavaScript开发移动原生应用,Facebook正式开源React Native!
- 2025-05-23 性能焦虑!前端人必看!5 个 React 组件优化神技! 颠覆你的认知!
- 2025-05-23 开始学习React - 概览和演示教程
- 2024-09-22 「连载二」「环境搭建」前端框架 React 入门教程
你 发表评论:
欢迎- 05-23浅谈3种css技巧——两端对齐
- 05-23JSONP安全攻防技术
- 05-23html5学得好不好,看掌握多少标签
- 05-23Chrome 调试时行号错乱
- 05-23本文帮你在Unix上玩转C语言
- 05-23Go 中的安全编码 - 输入验证
- 05-2331个必备的python字符串方法,建议收藏
- 05-23Dynamics.js – 创建逼真的物理动画的 JS 库
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)