React技术栈

前端之家收集整理的这篇文章主要介绍了React技术栈前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

转载自阮一峰的个人博客

React 是目前最热门的前端框架。

  • Facebook 公司2013年推出
  • 现在最好的社区支持和生态圈
  • 大量的第三方工具

React 的优点

  • 组件模式:代码复用和团队分工
  • 虚拟 DOM:性能优势
  • 移动端支持:跨终端
  • React 的缺点
  • 学习曲线较陡峭
  • 全新的一套概念,与其他所有框架截然不同
  • 只有采用它的整个技术栈,才能发挥最大威力
    总结:React 非常先进和强大,但是学习和实现成本都不低

JSX 语法

React 使用 JSX 语法,JavaScript 代码中可以写 HTML 代码

let myTitle = <h1>Hello,world!</h1>;
JSX 语法解释
(1)JSX 语法的最外层,只能有一个节点。

// 错误
let myTitle = <p>Hello</p><p>World</p>;
(2)JSX 语法中可以插入 JavaScript 代码,使用大括号。

let myTitle = <p>{'Hello ' + 'World'}</p>

Babel 转码器

JavaScript 引擎(包括浏览器和 Node)都不认识 JSX,需要首先使用 Babel 转码,然后才能运行。

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
// Our code goes here!
</script>
React 需要加载两个库:React 和 React-DOM,前者是 React 的核心库,后者是 React 的 DOM 适配库。

Babel 用来在浏览器转换 JSX 语法,如果服务器已经转好了,浏览器就不需要加载这个库。

课堂练习:JSX 语法

浏览器打开demos/jsx-demo/index.html,按照《操作说明》,完成练习。

ReactDOM.render(
<span>Hello World!</span>,
document.getElementById('example')
);

示例:React 组件

React 允许用户定义自己的组件,插入网页。

浏览器打开demos/react-component-demo/index1.html,按照《操作说明》,仔细查看源码。

class MyTitle extends React.Component {
render() {
return <h1>Hello World</h1>;
}
};

ReactDOM.render(
<MyTitle/>,
document.getElementById('example')
);

课堂练习:组件的参数

组件可以从外部传入参数,内部使用this.props获取参数。

打开demos/react-component-demo/index2.html,按照《操作说明》,完成练习。

class MyTitle extends React.Component {
render() {
return <h1
style={{color: this.props.color}}

Hello World</h1>;
}
};

<MyTitle color="red" />,

示例:组件的状态

组件往往会有内部状态,使用this.state表示。

浏览器打开demos/react-component-demo/index3.html,按照《操作说明》,仔细查看源码。

课堂练习:React 组件实战

浏览器打开demos/react-component-demo/index4.html,按照《操作说明》,完成练习。

组件的生命周期

React 为组件的不同生命阶段,提供了近十个钩子方法

componentWillMount():组件加载前调用
componentDidMount():组件加载后调用
componentWillUpdate(): 组件更新前调用
componentDidUpdate(): 组件更新后调用
componentWillUnmount():组件卸载前调用
componentWillReceiveProps():组件接受新的参数时调用
我们可以利用这些钩子,自动完成一些操作。

课堂练习:组件的生命周期

组件可以通过 Ajax 请求,从服务器获取数据。Ajax 请求一般在componentDidMount方法里面发出。

componentDidMount() {
const url = '...';
$.getJSON(url)
.done()
.fail();
}
打开demos/react-lifecycle-demo/index.html,按照《操作说明》,完成练习。

React 组件库

React 的一大优势,就是网上有很多已经写好的组件库,可以使用。

React-Bootstrap:https://react-bootstrap.github.io/

示例:ReCharts

ReCharts 是一个 React 图表组件库。http://recharts.org/

浏览器打开demos/recharts-demo/index.html,按照《操作说明》,仔细查看源码,体会 JSX 语法对表达复杂组件的优势。

<LineChart width={1000} height={400} data={data}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>

React 的核心思想

View 是 State 的输出

view = f(state)
上式中,f表示函数关系。只要 State 发生变化,View 也要随之变化。

React 的本质是将图形界面(GUI)函数化。

const person = {
name: "michel",
age: 31
}

const App = ({ person }) => <h1>{ person.name }</h1>

ReactDOM.render(<App person={person} />,document.body)

React 没有解决的问题

React 本身只是一个 DOM 的抽象层,使用组件构建虚拟 DOM。

如果开发大应用,还需要解决两个问题。

架构:大型应用程序应该如何组织代码
通信:组件之间如何通信?

架构问题

React 只是视图层的解决方案,可以用于任何一种架构。

MVC
MVVM
Observer
Reactive
...
到底哪一种架构最合适 React ?

通信问题

组件会发生三种通信。

  • 向子组件发消息
  • 向父组件发消息
  • 向其他组件发消息
    React 只提供了一种通信手段:传参。对于大应用,很不方便。

状态的同步

通信的本质是状态的同步。

React 同步状态的基本方法:找到通信双方最近的共同父组件,通过它的state,使得子组件的状态保持同步。

Flux 架构

Facebook 提出 Flux 架构的概念,被认为是 React 应用的标准架构。

最大特点:数据单向流动。与 MVVM 的数据双向绑定,形成鲜明对比。

Flux 的核心思想

不同组件的state,存放在一个外部的、公共的 Store 上面。
组件订阅 Store 的不同部分。
组件发送(dispatch)动作(action),引发 Store 的更新。
Flux 只是一个概念,有30多种实现。

目前最流行的两个 React 架构

React 架构的最重要作用:管理 Store 与 View 之间的关系。

MobX:响应式(Reactive)管理,state 是可变对象,适合中小型项目
Redux:函数式(Functional)管理,state 是不可变对象,适合大型项目
MobX 架构
MobX 的核心是观察者模式。

Store 是被观察者(observable)
组件是观察者(observer)
一旦Store有变化,会立刻被组件观察到,从而引发重新渲染。

MobX 的最简单例子

const {observable} = mobx;
const {observer} = mobxReact;

const person = observable({name: "张三",age: 31});

const App = observer(
({ person }) => <h1>{ person.name }</h1>
);

ReactDOM.render(<App person={person} />,document.body);
person.name = "李四";
代码:demos/mobx-demo/browser-demo目录

示例:MobX
进入demos/mobx-demo目录,按照《操作说明》,理解 MobX 框架。

UI 层是观察者,Store 是被观察者。

Store 所有的属性,分成两大类:直接被观察的属性自动计算出来的属性

class Store {
@observable name = 'Bartek';
@computed get decorated() {
return ${this.name} is awesome!;
}
}
UI 会观察到 Store 的变化,自动重新渲染。

Redux 架构

Redux 的核心概念

所有的状态存放在Store。组件每次重新渲染,都必须由状态变化引起。
用户在 UI 上发出action。
reducer函数接收action,然后根据当前的state,计算出新的state。

Redux 应用的架构

Redux 层保存所有状态,React 组件拿到状态以后,渲染出 HTML 代码

示例:Redux
进入demos/redux-demo目录,按照《操作说明》,理解 Redux 框架。

Redux 将组件分成 UI 组件和容器组件两类。
UI 组件是纯组件,不包含 state 和生命周期方法,不涉及组件的行为,只涉及组件的外观。
<div className="index">
<p>{this.props.text}</p>
<input
defaultValue={this.props.name}
onChange={this.props.onChange}
/>
</div>
容器组件正好相反。

不涉及组件的外观,只涉及组件的行为。
负责订阅 Store,将 Store 的数据处理以后,再通过参数传给 UI 组件。
用户给出配置以后,由 Redux 生成
// MyComponent 是纯的 UI 组件
const App = connect(
mapStateToProps,
mapDispatchToProps
)(MyComponent);
mapStateToProps: 定义 UI 组件参数与 State 之间的映射
mapDispatchToProps:定义 UI 组件与 Action 之间的映射

拆分 UI 组件和容器组件的好处

UI 组件与后台数据无关,可以由设计师负责
容器组件只负责数据和行为,一旦 Store 的数据结构变化,只要调整容器组件即可
表现层和功能层脱钩,有利于代码重用,也有利于看清应用的数据结构和业务逻辑
Reducer 函数
reducer是一个纯函数,用来接收action,算出新的state。

function reducer(state = {
text: '你好,访问者',
name: '访问者'
},action) {
switch (action.type) {
case 'change':
return {
name: action.payload,
text: '你好,' + action.payload
};
}
}
Store由 Redux 提供的createStore方法生成,该方法接受reducer作为参数。
为了把Store传入组件,必须使用 Redux 提供的Provider组件在应用的最外面,包裹一层。
const store = createStore(reducer);

ReactDOM.render(<Provider store={store}><App /></Provider>,document.body.appendChild(document.createElement('div')));

原文链接:https://www.f2er.com/react/301543.html

猜你在找的React相关文章