本文主要讲解React的基本介绍及其语法
1.什么是React?
React是通过JSX语法进行虚拟DOM渲染出页面的框架 。
2.React特点及优劣势 核心特点:虚拟DOM、组件化、JSX语法 优点:性能提升、方便维护和分工、跨终端 缺点:学习曲线较陡峭、全新的一套概念,与其他所有框架截然不同、只有采用它的整个技术栈,才能发挥最大威力
总结:React 非常先进和强大,但是学习和实现成本都不低
3.安装ublime对应的插件 1.下载Sublime,http://www.sublimetext.com/3 2.command+shift+p,输入install,安装插件包工具 3.设置字体大小command+、command- 4.下载Babel、EeactJs、JsFormat、Emmet 5.选择菜单->View->Syntax->Open all with current extension as…->Babel->JavaScript(Babel) 高亮了有木有。
下面是支持JSX的缩写:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 cdm→ componentDidMount: fn ( ) { ... } cdup→ componentDidUpdate: fn (pp, ps ) { ... } cs→ var cx = React.addons.classSet; cwm→ componentWillMount: fn ( ) { ... } cwr→ componentWillReceiveProps: fn (np ) { ... } cwu→ componentWillUpdate: fn (np, ns ) { ... } cwun→ componentWillUnmount: fn ( ) { ... } cx→ cx({ ... }) fdn→ React.findDOMNode(...) fup→ forceUpdate(...) gdp→ getDefaultProps: fn ( ) { return {...} } gis→ getInitialState: fn ( ) { return {...} } ism→ isMounted() props→ this .props. pt→ propTypes { ... } rcc→ component skeleton refs→ this .refs. ren→ render: fn ( ) { return ... } scu→ shouldComponentUpdate: fn (np, ns ) { ... } sst→ this .setState({ ... }) state→ this .state.
4.基础练习 React 使用 JSX 语法,JavaScript 代码中可以写 HTML 代码。
1 2 3 4 5 6 7 <div id ="example" > </div > <script type ="text/babel" > ReactDOM.render( <h1 > Hello,React!</h1 > , document .getElementById('example' ) ); </script >
React组件的定义:
1 2 3 4 5 6 7 8 9 class MyH1 extends React .Component { render(){ return <h1>Hello ,React !</h1> } } ReactDOM .render( <MyH1 />, document.getElementById('exampl e') );
React组件传参数props:
1 2 3 4 5 6 7 8 9 class MyH1 extends React .Component { render(){ return <h1 style={{ color:this .props.color }}>Hello ,React !</h1> } } ReactDOM .render( <MyH1 color='re d'/>, document.getElementById('exampl e') );
React组件的状态state:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 class My extends React .Component { constructor (...args ) { super (...args); console .log('构造函数' ); this .state={ name :'React' }; } handleChange (e ) { let name=e.target.value; this .setState({ name :name }); } render ( ) { return <div > <input value ={this.state.name} onChange ={this.handleChange.bind(this)}/ > <h1 className ='block' style ={{ color:this.props.color }}> Hello,{ this.state.name }!</h1 > </div > } } ReactDOM.render( <My color ='red' /> , document .getElementById('example' ) );
React组件的生命周期: React 为组件的不同生命阶段,提供了近十个钩子方法。
1 2 3 4 5 6 componentWillMount () :组件加载前调用componentDidMount () :组件加载后调用componentWillUpdate () : 组件更新前调用componentDidUpdate () : 组件更新后调用componentWillUnmount () :组件卸载前调用componentWillReceiveProps () :组件接受新的参数时调用
React的核心思想:View 是 State 的输出。
1 2 view = f(state ) 上式中,f表示函数关系。只要 State 发生变化,View 也要随之变化。
React的本质:将图形界面(GUI)函数化。
1 2 3 4 5 6 7 8 const person = { name : "michel" , age : 31 } const App = ({ person } ) => <h1 > { person.name }</h1 > ReactDOM.render(<App person ={person} /> , document .body)
5.Redux 架构 React架构的最重要作用:管理 Store 与 View 之间的关系。 Redux:函数式(Functional)管理,state 是不可变对象。 Redux 的核心概念:
所有的状态存放在Store。组件每次重新渲染,都必须由状态变化引起。
用户在 UI 上发出action。
reducer函数接收action,然后根据当前的state,计算出新的state。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 import React from 'react' ;import ReactDOM from 'react-dom' ;import { createStore } from 'redux' import { connect } from 'react-redux' import reducer from './reducer' ;const store = createStore(reducer);class MyComponent extends React .Component { render ( ) { return ( <div className ="index" > <p > {this.props.text}</p > <input defaultValue ={this.props.name} onChange ={this.props.onChange} /> </div > ); } } const App = connect( (state )=> { return { text : state.text, name : state.name } }, (dispatch )=> { return { onChange : (e ) => dispatch({ type : 'change' , payload : e.target.value }) } } )(MyComponent); ReactDOM.render( <App store ={store}/ > , document .body.appendChild(document .createElement('div' )) );