react简介
立即下载
求赞有赞必回
2024-04-20
Component
颜色
Color
实例
React
Panel
颜色盘
ColorBar
渲染
JS
733.2 KB
1 / 11
react 简介
引言
React 是近期非常热门的一个前端开发框架， 其本身作为 MVC 中的 View 层可以用来构建 UI，也可以以插件的形式
应用到 Web 应用非 UI 部分的构建中， 轻松实现与其他 JS 框架的整合，比如 AngularJS 。同时，React 通过对虚拟 DOM
中的微操作来实对现实际 DOM 的局部更新，提高性能。其组件的模块化开发提高了代码的可维护性。单向数据流的特点，
让每个模块根据数据量自动更新，让开发者可以只专注于数据部分，改善程序的可预测性。
React 概况介绍
React 中最基础最重要的就是 Component 了，它的构造和功能相当于 AngularJS 里面的 Directive ，或是其他 JS
框架里面的 Widgets 或 Modules 。Component 可以认为是由 HTML 、CSS、JS 和一些内部数据组合而成的模块。当然
Component 也可以由很多 Component 组建而成。不同的 Component 既可以用纯 JavaScript 定义，也可以用特有的
JavaScript 语法 JSX 创建而成。关于 JSX，我们会在后面加以详细介绍。为了能让您更好的理解 Component 概念，让
我们来看一下本文的实例。
图 1. 实例展示
本文的实例是一个颜色盘，当用户把鼠标移动到底部的颜色条上时，上方方框内会提示对应的颜色。如果用 React 来
实现这个实例， 这个颜色盘会被分割成为多个 Component 。最外面一层父级 Component 称为 ColorPanel ，同时它包含
了两个子 Component ：上方的 ColorDisplay 和下方的 ColorBar 。我们在 ColorPanel 的属性里面赋值了该颜色盘所要
显示的所有颜色， ColorBar 获取这个颜色属性渲染出所有的颜色， 当鼠标移动到 ColorBar 的某个颜色上时， ColorDisplay
显示对应的颜色和文字。在这个过程中，我们并不需要去手动触发所有组件的渲染，只需要在程序开始时渲染 ColorPanel 。
当 ColorPanel 的当前选中颜色这一状态发生变化时，子 Component （比如 ColorDisplay ）
Component/颜色/Color/实例/React/Panel/颜色盘/ColorBar/渲染/JS/
Component/颜色/Color/实例/React/Panel/颜色盘/ColorBar/渲染/JS/
-->