React技术栈
转载自阮一峰的个人博客 React 是目前最热门的前端框架。
React 的优点
JSX 语法React 使用 JSX 语法,JavaScript 代码中可以写 HTML 代码。 let myTitle = <h1>Hello,world!</h1>; // 错误 let myTitle = <p>{'Hello ' + 'World'}</p> Babel 转码器JavaScript 引擎(包括浏览器和 Node)都不认识 JSX,需要首先使用 Babel 转码,然后才能运行。 <script src="react.js"></script> Babel 用来在浏览器转换 JSX 语法,如果服务器已经转好了,浏览器就不需要加载这个库。 课堂练习:JSX 语法浏览器打开demos/jsx-demo/index.html,按照《操作说明》,完成练习。 ReactDOM.render( 示例:React 组件React 允许用户定义自己的组件,插入网页。 浏览器打开demos/react-component-demo/index1.html,按照《操作说明》,仔细查看源码。 class MyTitle extends React.Component { ReactDOM.render( 课堂练习:组件的参数组件可以从外部传入参数,内部使用this.props获取参数。 打开demos/react-component-demo/index2.html,按照《操作说明》,完成练习。 class MyTitle extends React.Component {
<MyTitle color="red" />, 示例:组件的状态组件往往会有内部状态,使用this.state表示。 浏览器打开demos/react-component-demo/index3.html,按照《操作说明》,仔细查看源码。 课堂练习:React 组件实战浏览器打开demos/react-component-demo/index4.html,按照《操作说明》,完成练习。 组件的生命周期React 为组件的不同生命阶段,提供了近十个钩子方法。 componentWillMount():组件加载前调用 课堂练习:组件的生命周期组件可以通过 Ajax 请求,从服务器获取数据。Ajax 请求一般在componentDidMount方法里面发出。 componentDidMount() { React 组件库React 的一大优势,就是网上有很多已经写好的组件库,可以使用。 React-Bootstrap:https://react-bootstrap.github.io/ 示例:ReChartsReCharts 是一个 React 图表组件库。http://recharts.org/ 浏览器打开demos/recharts-demo/index.html,按照《操作说明》,仔细查看源码,体会 JSX 语法对表达复杂组件的优势。 <LineChart width={1000} height={400} data={data}> React 的核心思想View 是 State 的输出。 view = f(state) React 的本质是将图形界面(GUI)函数化。 const person = { const App = ({ person }) => <h1>{ person.name }</h1> ReactDOM.render(<App person={person} />,document.body) React 没有解决的问题React 本身只是一个 DOM 的抽象层,使用组件构建虚拟 DOM。 如果开发大应用,还需要解决两个问题。 架构:大型应用程序应该如何组织代码? 架构问题React 只是视图层的解决方案,可以用于任何一种架构。 MVC 通信问题组件会发生三种通信。
状态的同步通信的本质是状态的同步。 React 同步状态的基本方法:找到通信双方最近的共同父组件,通过它的state,使得子组件的状态保持同步。 Flux 架构Facebook 提出 Flux 架构的概念,被认为是 React 应用的标准架构。 最大特点:数据单向流动。与 MVVM 的数据双向绑定,形成鲜明对比。 Flux 的核心思想不同组件的state,存放在一个外部的、公共的 Store 上面。 目前最流行的两个 React 架构React 架构的最重要作用:管理 Store 与 View 之间的关系。 MobX:响应式(Reactive)管理,state 是可变对象,适合中小型项目 Store 是被观察者(observable) MobX 的最简单例子const {observable} = mobx; const person = observable({name: "张三",age: 31}); const App = observer( ReactDOM.render(<App person={person} />,document.body); 示例:MobX UI 层是观察者,Store 是被观察者。 Store 所有的属性,分成两大类:直接被观察的属性和自动计算出来的属性。 class Store { Redux 架构Redux 的核心概念 所有的状态存放在Store。组件每次重新渲染,都必须由状态变化引起。 Redux 应用的架构Redux 层保存所有状态,React 组件拿到状态以后,渲染出 HTML 代码。 示例:Redux Redux 将组件分成 UI 组件和容器组件两类。 不涉及组件的外观,只涉及组件的行为。 拆分 UI 组件和容器组件的好处UI 组件与后台数据无关,可以由设计师负责 function reducer(state = { ReactDOM.render(<Provider store={store}><App /></Provider>,document.body.appendChild(document.createElement('div'))); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |