React基础知识

本文主要讲解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的缩写：

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 代码。

<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
	<h1>Hello,React!</h1>,
	document.getElementById('example')
);
</script>

React组件的定义：

class MyH1 extends React.Component{
	render(){
		return <h1>Hello,React!</h1>
	}
}
ReactDOM.render(
	<MyH1/>,
	document.getElementById('example')
);

React组件传参数props：

class MyH1 extends React.Component{
	render(){
		return <h1 style={{ color:this.props.color }}>Hello,React!</h1>
	}
}
ReactDOM.render(
	<MyH1 color='red'/>,
	document.getElementById('example')
);

React组件的状态state：

/*
注意事项：
1.JSX语法最外层只能有一个节点
2.必须有闭合标签
3.自定义组件第一个字母必须大写，区别内置对象
4.自定义组件必须有render方法
5.render方法的return后面必须有标签
*/
class My extends React.Component{
	//构造函数
	constructor(...args){
		super(...args);
		console.log('构造函数');
		this.state={
			name:'React'
		};
	}
	//定义change事件的方法
	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>
	}
}
//渲染虚拟DOM到真实DOM
ReactDOM.render(
	<My color='red'/>,
	document.getElementById('example')
);

React组件的生命周期： React 为组件的不同生命阶段，提供了近十个钩子方法。

componentWillMount()：组件加载前调用
componentDidMount()：组件加载后调用
componentWillUpdate(): 组件更新前调用
componentDidUpdate(): 组件更新后调用
componentWillUnmount()：组件卸载前调用
componentWillReceiveProps()：组件接受新的参数时调用

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)

5.Redux 架构

React架构的最重要作用：管理 Store 与 View 之间的关系。 Redux：函数式（Functional）管理，state 是不可变对象。 Redux 的核心概念：

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

Redux

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'))
);