你真的弄懂 React 了吗？（一）

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

说一说你对 React 的理解？

1、是什么

React，用于构建用户界面的 JavaScript 库，只提供了 UI 层面的解决方案

遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效

使用虚拟DOM来有效地操做DOM，遵循从高阶组件到低阶组件的单向数据流

帮助咱们将界面成了各个独立的小块，每个块就是组件，这些组件之间能够组合、嵌套，构成总体页面

react 类组件使用一个名为 render() 的方法或者函数组件return，接收输入的数据并返回须要展现的内容

class HelloMessage extends React.Component {
  render() {
    return (
      <div> Hello {this.props.name} </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);
复制代码

上述这种相似 XML形式就是JSX，最终会被babel编译为合法的JS语句调用

被传入的数据可在组件中经过 this.props 在 render() 访问

2、特性

React特性有不少，如：

• JSX语法
• 单向数据绑定
• 虚拟DOM
• 声明式编程
• Component

着重介绍下声明式编程及Component

声明式编程

声明式编程是一种编程范式，它关注的是你要作什么，而不是如何作

它表达逻辑而不显式地定义步骤。这意味着咱们须要根据逻辑的计算来声明要显示的组件

如实现一个标记的地图：

经过命令式建立地图、建立标记、以及在地图上添加的标记的步骤以下：

// 建立地图
const map = new Map.map(document.getElementById('map'), {
    zoom: 4,
    center: {lat,lng}
});

// 建立标记
const marker = new Map.marker({
    position: {lat, lng},
    title: 'Hello Marker'
});

// 地图上添加标记
marker.setMap(map);
复制代码

而用React实现上述功能则以下：

<Map zoom={4} center={lat, lng}>
    <Marker position={lat, lng} title={'Hello Marker'}/>
</Map>
复制代码

声明式编程方式使得React组件很容易使用，最终的代码简单易于维护

Component

在React 中，一切皆为组件。一般将应用程序的整个逻辑分解为小的单个部分。 咱们将每一个单独的部分称为组件

组件能够是一个函数或者是一个类，接受数据输入，处理它并返回在UI中呈现的React元素

函数式组件以下：

const Header = () => {
    return(
        <Jumbotron style={{backgroundColor:'orange'}}> <h1>TODO App</h1> </Jumbotron>
    )
}
复制代码

类组件（有状态组件）以下：

class Dashboard extends React.Component {
    constructor(props){
        super(props);

        this.state = {

        }
    }
    render() {
        return (
            <div className="dashboard"> <ToDoForm /> <ToDolist /> </div>
        );
    }
}
复制代码

一个组件该有的特色以下：

• 可组合：个组件易于和其它组件一块儿使用，或者嵌套在另外一个组件内部
• 可重用：每一个组件都是具备独立功能的，它能够被使用在多个UI场景
• 可维护：每一个小的组件仅仅包含自身的逻辑，更容易被理解和维护

3、优点

经过上面的初步了解，能够感觉到React存在的优点：

• 高效灵活
• 声明式的设计，简单使用
• 组件式开发，提升代码复用率
• 单向响应的数据流会比双向绑定的更安全，速度更快

参考文章：

• web前端面试 - 面试官系列