深入浅出React和Redux笔记一

2018-04-18  本文已影响0人  痴人会说梦
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一样的代码.

//原型
React.createElement('div', {className: 'App'}, 'Hello World');
//JSX语法
<div className="App">Hello World</div>
//示例:
render() {
    return (
      <div className="App">Hello World </div>
    );
}

JSX的理念

1.做同一件事高耦合性设计原则(React的组件可以把JavaScript、HTML和CSS的功能在一个文件中，实现真正的组件封装。)

业界一般用HTML来代表内容，用CSS代表样式，用JavaScript来定义交互行为，这三种语言分在三种不同的文件里面。而React是把类似HTML的标记语言和JavaScript混在一起,但实际上前者是把不同技术分开管理了，而不是逻辑上的“分而治之”.

2.事件处理函数:
JSX的onClick事件处理方式和HTML的onclick有很大不同

HTML的onclick:
而JSX:

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优点

上一篇 下一篇

猜你喜欢

热点阅读