React的基本用法和技术特点

点击蓝字

关注丁哥

React的基本用法和技术特点

React是一个开源程序库。由Facebook所倡导的社区来维护。

1   基本用法

它的基本用法如下:

function Greeter(props) {

return {props.greeting}

}

var App = ;

ReactDOM.render(App, document.getElementById('myReactApp'));

。

上面的代码在浏览器中显示会换算成如下内容:

Hello World!

。

现在来说一下React的重要特性。

2   以组件为单位

第1个特性就是以组件为单位。

ReactDOM.render(, document.getElementById('myReactApp'));

组件的使用大大降低了项目开发的复杂度，这些组件可以传递参数值。从而大大提高了组件使用的灵活性。

目前react支持两种组件形式。一种是函数体组件，一种是类组件。

2.1  函数体组件

函数体组件就是通过一个函数返回一些jsx，也就是JavaScript和html的混合体。

函数组件是无状态的。

const Greeting = (props) => Hello, {props.name}!;

2.2  类组件

类组件是基于es6的类来创建有状态的组件。之所以称之为有状态，是因为他们的state要存储传递这些组件的值。

class ParentComponent extends React.Component {

state = { color: 'green' };

render() {

return (

);

}

}

3     虚拟DOM

另一个特性是虚拟DOM，也就是文档对象模型。React使用内存中的数据结构缓存来计算数据的差别，从而提高显示DOM的效率和性能。

有了这种技术以后我们在更新网页的时候不需要每次都更新整个页面，而只需要更新那些变化的部分就可以了。

4     JSX

再一个特性是jsx又称之为JavaScript XML，它是JavaScript和html的一个混合体。这个特性有的人喜欢，有的人讨厌。

class App extends React.Component {

render() {

return (

Header

Content

Footer

);

}

}

5     条件声明

再一个特性是条件声明，尽管在jsx中不能使用，if else语句，但是有条件表达式这种语法。

class App extends React.Component {

render() {

const i = 1;

return (

{ i === 1 ? 'true' : 'false' }

);

}

}

class App extends React.Component {

render() {

const sections = [1, 2, 3];

return (

{sections.length > 0 && sections.map(n => (

Section {n}

))}

);

}

}

6  React hooks

Reacthooks的引入。

在类组件中我们有生命周期函数来处理组建的不同状态，比如shouldComponentUpdate,componentDidMount, componentWillUnmount, render。在函数组件当中是通过Hooks来监控生命周期状态的。内置的Hooks有useState,useContext, useReducer, useEffect等。

Hooks使用需要遵循如下两个原则:

1. 只能在顶层代码中调用，不能在循环中或者条件判断当中调用。

2. 只能在函数组件中使用，不能在常规函数和类组件中使用。

7   React的数据管理

接下来说一下React的数据管理。

React是使用flux架构来管理数据的。它的基本理念是属性向下流，动作向上流。不能够直接的修改属性值，而需要通过动作的发放，在动作触发的回调函数中对数据进行修改。

在众多react的数据管理模式当中，redux是最著名的一个。它的特点是使用单一的数据仓库。

感谢您的支持，

丁哥会一如既往提供优质内容！！！