適合Vue使用者的React的詳細教程，你值得擁有！

最近把使用uniapp寫的小程式，通過taro使用react框架重新寫了一下，
於是簡單總結了一下，寫了這篇文章方便熟悉Vue的小夥伴們學習React。

安裝

1. 在html檔案中直接引入測試

	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

因為是jsx，所以需在寫react程式碼的script標籤上，加上 type=“text/babel” 屬性

2. 使用React腳手架

$ cnpm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm start

本文例子使用第一中形式講解

元件

React定義元件的方式有這兩種:

// ES6 class 定義
class Index extends React.Component{
	constructor(props){
		super(props)
		console.log(this.props);
	}
	render(){
		return(
			<div>Home</div>
		)
	}
}

// 函式/無狀態/UI元件
function Index(props){
	console.log(props);
	return(
		<div>Home</div>
	)
}

//上述兩個元件在 React 裡是等效的。

...

class App extends React.Component {
	render() {
		return <Index name="index" message='哈哈哈' good-foo="12312" />;
	}
}

ReactDOM.render(
	React.createElement(App),
	document.getElementById('app')
);

React的props 代表傳遞給元件的引數

上例props的值：

{ name:‘index’, message:‘哈哈哈’, good-foo:‘12312’}

• 短橫線命名的屬性也將以短橫線屬性的形式存在

super()

• 用ES6 class 定義的元件，在constructor中必須使用super()執行父建構函式，當然最好傳遞props進去
• 使用super()後才可在constructor中使用this

//不在super中傳遞props
class Index extends React.Component{
	constructor(props){
		super()
		console.log(props); // {...}
		console.log(this.props); // undefined
	}
	render(){
		return(
			<div>Home</div>
		)
	}
}

React的預設props (defaultProps)

1. React 元件類中作為為靜態屬性

//
class Index extends React.Component{
	constructor(props){
		super(props)

	}
	//增加
	static defaultProps = { 
		name: 'index頁'
	}
	render(){
		return(
			<div>Home</div>
		)
	}
}

2. 作為類或者建構函式的屬性

class Index extends React.Component{
	constructor(props){
		super(props)

	}
	render(){
		return(
			<div>Home</div>
		)
	}
}

// 或者

function Index(props){
	return(
		<div>
			{props.name}
		</div>
	)
}

Index.defaultProps = {    
	name: '我是props的預設值！'
}

3. 函式式元件預設值的解構

function Index(props){

	const {
		name: '我是props的預設值！'
	} = props

	return(
		<div>
			{props.name}
		</div>
	)
}

React的’data’ state

1.定義state初始值

• 在render函式裡通過解構state的值就可直接使用

class Index extends React.Component{
	constructor(props){
		super(props)
		this.state = { //增加
			name:'張三',
			age:18
		}
	}
	render(){
		const {	name,	age	} = this.state // 增加
		return(
			<div>
				<div>{this.props.name}</div>
				<ul>
					<li>{name}</li>
					<li>{age}</li>
				</ul>
			</div>
		)
	}
}

Index.defaultProps ={
	message: '我是props的預設值！'
}

class App extends React.Component {
	render() {
		return <Index name='index' message='哈哈哈'  good-foo="12312" />;
	}
}
ReactDOM.render(
	React.createElement(App),
	document.getElementById('app')
);

2. 修改state中的值

setState()

1. 更新狀態基本用法：

	// Vue修改data的 age值
	// this.age = 20

	// React修改state的 age值
	this.setState({
		age:20
	})

2. 更新狀態之前獲取舊值的用法

• prevState 代表將要改變 state 的age值前的 state
• props 代表傳入的props

this.setState((prevState,props)=>{
	console.log(prevState,props);
	return{
		age:20
	}
})

3. 更新狀態後呼叫的用法

• 有點類似在使用vue的$nextTick()的地方，部分業務程式碼可以用這個用法

	this.setState({
			age:20
		},()=>{
		// 當更新完age的值後執行
	})

React的’computed’

• Vue

computed:{
	renderFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

• React

class Example extends Component {
	constructor(props){
		super(props)
		this.state = {
			firstName: '',
			lastName: '',
		}
	}
	renderFullName() {
    const { firstName, lastName } = this.state;
    return `${firstName} ${lastName}`;
  }
  render() {
    const renderFullName = this.renderFullName()
    return <div>{renderFullName}</div>;
  }
}

• 當然這裡也可以使用react的hook實現

React的’watch’

監聽props的 obj屬性 初始化執行一次

• Vue

props:{
	obj:{
		type:Object,
		defaule:()=>{
			name:'張三',
			age:20
		}
	}
}
watch:{
	obj:{
		immediate: true,
		handler:function(val,oldval){
			console.log(val.name)
		}
	}
}

• React

class Content extends React.Component {
	constructor(props){
		super(props)
	}
	static defaultPros = {
		obj:{
			name:'張三',
			age:20
		}
	}

	componentWillReceiveProps(newProps){
		if(newProps.obj === this.props.obj){
			console.log(this.props.obj.name)
		}
	}
	componentDidMount() {
    console.log(this.props.obj.name)
  }
}

1. 通過使用componentWillReceiveProps鉤子函式 獲取newProps
2. 這裡監聽obj物件，需要對比新舊props判斷obj是否變化 在進行其他處理
3. 通過使用componentDidMount鉤子函式 類似 Vue的mounted ，進行初始執行一次

• 當然這裡也可以使用react的hook實現也更簡單

React定義函式

class Index extends React.Component{
	constructor(props){
		super(props)
		this.state = { //增加
			name:'張三',
			age:18
		}
		this.handleClick1 = this.handleClick1.bind(this)
		this.handleClick2 = this.handleClick2.bind(this)
	}
	//增加
	handleClick1(){
		// this.props
		// this.state
		console.log('handleClick1---')
	}
	handleClick2(event,name){
		console.log('handleClick2---',event,name)
	}
	render(){
		const {	name,	age	} = this.state // 增加
		return(
			<div>
				<div>{this.props.name}</div>
				<ul>
					<li onClick={this.handleClick1}>{name}</li>
					<li onClick={(event)=>{this.handleClick2(event,name)}}>{age}</li>
				</ul>
			</div>
		)
	}
}

關於函式

handleClick1: 可以獲取 this.props 和 this.state 寫一些業務

handleClick2: 寫成回撥函式的形式，可以傳遞事件物件，以及一些其他資料

handleClick2不能不加一層函式，這裡類似於React編譯的時候會把函式體直接放在這裡，會被直接呼叫

通過bind 繫結函式的this 指向， 通過 this呼叫函式，會存在this指向丟失的情況