企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# React 技术栈 React 是目前最热门的前端框架。 * Facebook 公司2013年推出 * 现在最好的社区支持和生态圈 * 大量的第三方工具 [![](https://github.com/ruanyf/jstraining/raw/master/docs/images/react-logo.png)](https://github.com/ruanyf/jstraining/blob/master/docs/images/react-logo.png) [TOC=2,2] ## 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`,按照[《操作说明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#jsx),完成练习。 ~~~ ReactDOM.render( <span>Hello World!</span>, document.getElementById('example') ); ~~~ ## 示例:React 组件 React 允许用户定义自己的组件,插入网页。 浏览器打开`demos/react-component-demo/index1.html`,按照[《操作说明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#react-%E7%BB%84%E4%BB%B6%E8%AF%AD%E6%B3%95),仔细查看源码。 ~~~ 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`,按照[《操作说明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#react-%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8F%82%E6%95%B0),完成练习。 ~~~ 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`,按照[《操作说明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#react-%E7%BB%84%E4%BB%B6%E7%9A%84%E7%8A%B6%E6%80%81),仔细查看源码。 [![](https://github.com/ruanyf/jstraining/raw/master/docs/images/react-component-state.png)](https://github.com/ruanyf/jstraining/blob/master/docs/images/react-component-state.png) ## 课堂练习:React 组件实战 浏览器打开`demos/react-component-demo/index4.html`,按照[《操作说明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#react-%E7%BB%84%E4%BB%B6%E5%AE%9E%E6%88%98),完成练习。 ## 组件的生命周期 React 为组件的不同生命阶段,提供了近十个钩子方法。 * `componentWillMount()`:组件加载前调用 * `componentDidMount()`:组件加载后调用 * `componentWillUpdate()`: 组件更新前调用 * `componentDidUpdate()`: 组件更新后调用 * `componentWillUnmount()`:组件卸载前调用 我们可以利用这些钩子,自动完成一些操作。 ## 课堂练习:组件的生命周期 组件可以通过 Ajax 请求,从服务器获取数据。Ajax 请求一般在`componentDidMount`方法里面发出。 ~~~ componentDidMount() { const url = '...'; $.getJSON(url) .done() .fail(); } ~~~ 打开`demos/react-lifecycle-demo/index.html`,按照[《操作说明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#react-%E7%BB%84%E4%BB%B6%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F),完成练习。 ## React 组件库 React 的一大优势,就是网上有很多已经写好的组件库,可以使用。 React-Bootstrap:[https://react-bootstrap.github.io/](https://react-bootstrap.github.io/) [![](https://github.com/ruanyf/jstraining/raw/master/docs/images/react-bootstrap.png)](https://github.com/ruanyf/jstraining/blob/master/docs/images/react-bootstrap.png) ## 示例:ReCharts ReCharts 是一个 React 图表组件库。[http://recharts.org/](http://recharts.org/) 浏览器打开`demos/recharts-demo/index.html`,按照[《操作说明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#recharts),仔细查看源码。 ~~~ <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 应用的架构 React 只是一个 DOM 的抽象层,并没有解决应用程序的架构问题:大型应用程序应该如何组织代码? Facebook 提出 Flux 架构的概念。 [![](https://github.com/ruanyf/jstraining/raw/master/docs/images/flow.png)](https://github.com/ruanyf/jstraining/blob/master/docs/images/flow.png) 最大特点:数据单向流动 ## 目前最流行的两个 React 框架 * MobX:采用观察者模式,自动响应数据变化 * Redux:Flux 的函数式实现 ## MobX 架构 MobX 的核心概念,就是组件是观察者,一旦`Store`有变化,会立刻被组件观察到,从而引发重新渲染。 ~~~ @observer class App extends React.Component { render() { // ... } } ~~~ ## 示例:MobX 进入`demos/mobx-demo`目录,按照[《操作说明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#mobx),理解 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`。 [![](https://github.com/ruanyf/jstraining/raw/master/docs/images/redux-architecture.png)](https://github.com/ruanyf/jstraining/blob/master/docs/images/redux-architecture.png) ## 示例:Redux 进入`demos/redux-demo`目录,按照[《操作说明》](https://github.com/ruanyf/jstraining/blob/master/demos/README.md#redux),理解 Redux 框架。 * Redux 将组件分成 UI 组件和容器组件两类。 * UI 组件是纯组件,需要用户自己写。 ~~~ <div className="index"> <p>{this.props.text}</p> <input defaultValue={this.props.name} onChange={this.props.onChange} /> </div> ~~~ 容器组件在用户给出配置以后,由 Redux 生成。 ~~~ // MyComponent 是纯的 UI 组件 const App = connect( mapStateToProps, mapDispatchToProps )(MyComponent); ~~~ * mapStateToProps: 定义 UI 组件参数与 State 之间的映射 * mapDispatchToProps:定义 UI 组件与 Action 之间的映射 `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')) ); ~~~