1 例句摘抄

2 单词

React 组件最终会生成 HTML，所以你可以使用给普通 HTML 设置 CSS 一样的方法来设置样式。此外，React组件还增加了行内样式 – React组件内置了prop – style 可以快速方便地给组件添加行内样式。 也就是说，React支持两种指定样式方式

• css样式

1
2
3
4
5
6

.star {
  background-color: grey;
}
.star.selected {
  background-color: red;
}

1
2
3

import './star.css';

const component = <Star className={(selected ? 'star selected' : 'star')}

• 行内样式

1
2
3
4
5
6

const Styles = {
  buttonStyle: {
    color: '#fff'
  }
}
const component = <Component style={Styles.buttonStyle} />;

React 作为前端框架，其管理的是一个个 UI 控件，而在 React 的语言体系中，我们将之称为 component – 组件。

狭义上来说，组件一般是 UI 组件，负责展示及和用户的交互。而广义上，组件是带有一定业务含义的，其不仅有与用户的交互，更重要的是数据与UI控件们之间的交互。

我们在之前介绍JSX时介绍过，React 通过自定义元素的方式实现组件化(虚拟DOM)，组件元素被描述成纯粹的 JSON 对象，意味着可以使用方法或是类来构建。React 组件基本上由 3 个部分组成 —— 属性（props）、状态（state）以及生命周期方法。通过 JSX，我们通常将要渲染的组件组成一棵组件树，就像搭乐高玩具一样一步步组成最终我们想要的 UI 界面。

虽说是编程规范，但是本文旨在总结我在日常工作中与学习网上同行经验中收集来的一些最佳实践。建议平时编程尽自己最大能力编写最佳实践的代码，有助于提升自己的代码质量，同时也可以让自己在无形中养成追求卓越、追求优雅的气质。

1 优雅的语法

1 例句摘抄

2 单词

本章我们将探讨JavaScript中继承与多态的设计及实现。

1 JavaScript的继承

本章将总结一个JavaScript中和变量操作相关的一些高级操作。主要为ECMAScript6及以上但是非常实用的高级特性。

1 对象的解构

JavaScript本身不提供一个 class 实现（在 ES2015/ES6 中引入了 class 关键字，但那只是语法糖，JavaScript 仍然是基于原型的), 而是一种基于原型的语言(prototype-based language) —— 同一类型的对象共有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain）。

我看过许多文章，一上来就大讲prototype、this、原型链等等“高深”的内容，把各种概念抛出来把人看得云里雾里、似懂非懂。而在这里，我用自己的思路和大家一起分析与学习下JS的面向对象技术。我将以面向对象的三大特性为切入点，尝试着深入了解JavaSctipr的面向对象设计思路与实现：

我们说程序=数据结构+算法，这表明了数据结构在一门语言中的重要性，他将是你所写的程序的主要构成。而变量是数据结构的载体，数据结构常常是一块特定结构的内存空间，而要引用这段内存空间，我们就需要操作变量。因为JS是一门弱类型的语言，因此它的变量的概念有点像C中的指针或Java中的引用，表示其内容就是其指向的这段内存结构。

本章我们将先了解JavaScript中的数据类型，不同数据类型代表不同的意义、也占用不同的内存空间。再看看变量，他如上面说的代表一份内存的载体，也代表着一个作用域。最后我们看下算法，js中的控制流程与函数。