React的首要思想是通过组件（Component）来开发应用。组件，简单说，指的是能完成某个特定功能的独立的、可重用的代码。
基于组件的应用开发是广泛使用的软件开发模式，用分而治之的方法，把一个大的应用分解成若干小的组件，每个组件只关注于某个小范围的特定功能，但是把组件组合起来，就能够构成一个功能庞大的应用。如果分解功能的过程足够巧妙，那么每个组件可以在不同场景下重用，那样不光可以构建庞大的应用，还可以构建出灵活的应用。打个比方，每个组件是一块砖，而一个应用是一座楼，想要一次锻造就创建一座楼是不现实的。实际上，总是先锻造很多砖，通过排列组合这些砖，才能构建伟大的建筑。
React非常适合构建用户交互组件,可以在组件中定义交互行为，还可以在React组件中定义样式.
//import是ES6（EcmaScript6）语法中导入文件模块的方式
//从react库中引入了React和Component
import React, { Component } from 'react';
//React 没有使用,但引入非常必要,否则会编译错误:''React' must be in scope when using JSX' 在使用JSX的范围内必须要有React
//在使用JSX的代码文件中，即使代码中并没有直接使用React，也一定要导入这个React，这是因为JSX最终会被转译成依赖于React的表达式
//Component作为所有组件的基类，提供了很多组件共有的功能
class ClickCounter extends Component {
constructor(props){
super(props);
this.onClickButton = this.onClickButton.bind(this);
this.state = {count:0};
}
//定义交互
onClickButton(){
this.setState({count:this.state.count + 1});
}
//渲染
render() {
//定义一个counterStyle对象
const conunterStyle = {
margin:'16px'
}
return (
//使用样式
<div style={conunterStyle}>
<button onClick={this.onClickButton}>Click Me</button>
<div>Click Count:<span id="clickCount">{this.state.count}</span></div>
</div>
);
}
}
//导出组件
export default ClickCounter;
JSX ~ React使用JSX语法
JSX，是JavaScript的语法扩展（eXtension），让我们在JavaScript中可以编写像HTML一样的代码.
- 一种句法变换——每一个JSX节点都对应着一个JavaScript函数。
- JSX既不提供也不需要运行时库。
- JSX并没有改变或添加JavaScript的语义——它只是简单的函数调用而已。
//原型
React.createElement('div', {className: 'App'}, 'Hello World');
//JSX语法
<div className="App">Hello World</div>
//示例:
render() {
return (
<div className="App">Hello World </div>
);
}
- 以内联的方式为每个节点添加属性,可以设置为动态的JavaScript变量,函数,使用三木运算,&&运算符,用{}包起来,
- JSX中使用的’元素’不局限于HTML元素,也可以是React组件,区别HTML元素与React组件的标准为第一个字母是否大写.
- 可以通过onClick添加事件处理函数(HTML是onclick,为人诟病的写法,一般都使用jquery添加事件处理函数)
JSX的理念
1.做同一件事高耦合性设计原则(React的组件可以把JavaScript、HTML和CSS的功能在一个文件中，实现真正的组件封装。)
业界一般用HTML来代表内容，用CSS代表样式，用JavaScript来定义交互行为，这三种语言分在三种不同的文件里面。而React是把类似HTML的标记语言和JavaScript混在一起,但实际上前者是把不同技术分开管理了，而不是逻辑上的“分而治之”.
2.事件处理函数:
JSX的onClick事件处理方式和HTML的onclick有很大不同
HTML的onclick:
- onclick添加的事件处理函数是在全局环境下执行的，这污染了全局环境，很容易产生意料不到的后果；
- 给很多DOM元素添加onclick事件，可能会影响网页的性能，毕竟，网页需要的事件处理函数越多，性能就会越低；
- 对于使用onclick的DOM元素，如果要动态地从DOM树中删掉的话，需要把对应的时间处理器注销，假如忘了注销，就可能造成内存泄露，这样的bug很难被发现。
而JSX:
- onClick挂载的每个函数，都可以控制在组件范围内，不会污染全局空间
- 性能高 使用了事件委托（event delegation）的方式处理点击事件，无论有多少个onClick出现，其实最后都只在DOM树上添加了一个事件处理函数，挂在最顶层的DOM节点上。所有的点击事件都被这个事件处理函数捕获，然后根据具体组件分配给特定函数.
.没有内存泄漏 React控制了组件的生命周期，在unmount的时候自然能够清除相关的所有事件处理函数
jQuery与React
jQuery直观易懂易于理解,但对于庞大的项目,代码结构复杂,难以维护
1
React只关心显示什么,不关注怎么去做,更容易管理. UI = render(data)即用户看到的界面都是render的执行结果,只接受数据(data)作为参数,这个函数是一个纯函数(没有副作用,输出完全依赖于输入的函数,多次函数调用输入相同,得到的结果也相同),完全取决于输入数据.
2
React基于Virtual DOM
React应用就是通过重复渲染来实现用户交互,看起来每次render函数被调用，都要把整个组件重新绘制一次，这样看起来有点浪费。事实并不是这样，React利用Virtual DOM，让每次渲染都只重新渲染最少的DOM元素.
HTML是基于DOM树进行解析和渲染的,DOM操作会引起浏览器对网页进行重新布局，重新绘制，所以性能优化有一个原则：尽量减少DOM操作.React并不是通过HTML语句直接构建DOM树，而是首先构建Virtual DOM。DOM树是对HTML的抽象，那Virtual DOM就是对DOM树的抽象。Virutal DOM不会触及浏览器的部分，只是存在于JavaScript空间的树形结构，每次自上而下渲染React组件时，会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM，对比就会发现差别，然后修改真正的DOM树时就只需要触及差别中的部分 .
React优点
-
避免构建复杂的程序结构，无论何种事件，引发的都是React组件的重新渲染，至于如何只修改必要的DOM部分，则完全交给React去操作，开发者并不需要关心。
-
利用函数式编程的思维来解决用户界面渲染的问题，最大的优势是开发者的效率会大大提高，开发出来的代码可维护性和可阅读性也大大增强
网友评论