React.js基础

环境配置：

• Node.js安装，开发选LTS版本
• npm配置
• 官网：Docs > Create a New React Project
• Shift + 右键 >在当前路径打开CMD
• 安装脚手架工具create-react-app：
  npm install create-react-app -g
• 创建项目：
  create-react-app my-project
• 运行项目：
  cd my-project
npm start

JSX

• 一种语法糖—React.createElement( )
• ReactElement对象
• JSX{}里面是JS表达式，不能是语句

React属性

• 安装bootstrap
  npm install bootstrap --save
• 组件写成函数形式
  const NameCard = (props) => { return ( ) }

State状态

• this.state = ({ })
• this.setState({ })
• 方式一：onClick = { this.increaseLikes() } + this.increaseLikes = this.increaseLikes.bind(this)
• 方式二：onClick = { () => { this.increaseLikes() }}

生命周期

• 组件初始化

• 组件更新

• 组件卸载
  

• 参考：React生命周期详解

• 参考：React生命周期执行顺序详解

• 参考：React v16.3新生命周期

• 参考：React-新的生命周期（React16版本）

---

表单

• 受控组件和非受控组件（表单的替代方法,快速集成React和非React代码）
• ref取得DOM节点
  ref = {(参数) => {this.参数 = 参数}}回调函数
  DOM节点输出this.参数.value

综合实例留言本

• comments: [...this.state.comments, comment]把新的加到旧的后面“…三个点语法ES6”
• 状态提升：将共享状态提升至最近的父组件进行管理
• 自上而下的数据流：可变数据只有一个数据源
• 和双向绑定的区别：单项绑定要写更多的代码，但是更利于检查Bug；或者使用自定义逻辑限制用户的更改

Context v16.3

设计目的是共享那些对于组件来说全局的数据

1.新建Context对象
2.引入Context对象
3.使用：节点包裹

	 <ThemsContext.Provider value={themes.light}> 
	 <ThemsContext.Consumer> 
		 { 
			 theme => {
				 return (       )
			 }
		 }
	 </ThemsContext.Consumer>

---

Dell Lee

• React Fiber v16以后的版本
• import React from 'react'识别组件名字
• import ReactDOM from 'react-dom'加载组件，渲染组件
• 一个类继承了React.Component后就是一个组件
  class App extends React.Component { render(){ return (渲染内容); } }
• 导出：export default App;

TodoList

父组件：
constructor(props){  //有类就有constructor
	super(props);  //初始化操作 
	this.state = {  
		list: [],
		inputValue: '' 
	}
	//this.handleAdd = this.handleAdd.bind(this);
}

handleInputChange(e) { //e代表event
	this.setState({
		inputValue: e.target.value
	})
}

handleAdd() {
	this.setState({
		list: [...this.state.list, this.state.inputValue]
	}) //这个时候this指向的是button
}

handleDel(index) {
 	const list = [...this.state.list]; //拷贝副本不要直接操作原来的数据
 	list.splice(index, 1);
 	this.setState({
		list: list
    })
}

getTodeItems() {
	return (
		this.state.list.map((item,index) => {
 			return <li key={index} onClick={this.handleDel.bind(this, index)}>{item}</li>
 			//return <TodeItem content={item} />//父组件通过属性形式传递参数
 			//子组件通过props接收参数 例如：{this.props.content}
 		})
	)
}

<input value={this.state.inputValue}onChange={this.handleInputChange.bind(this)}
<button onClick={this.handleAdd.bind(this)}>add</button> 
// 加上bind这之后handleAdd的this就是指向最外层的this了
<ul>{this.getTodeItems()}</ul>


子组件：
class TodeItem extends React.Component{
	constructor(props){
		super(props);
		this.handleDelete = this.handleDelete.bind(this);
}

handleDelete() {
	//const { delete, index } =this.props;
	//delete(index);
	this.props.delete(this.props,index);
}

render() {
	const { content } = this.props;
	return (
		<div onClick={this.handleDelete}>{content}</div>)
		//<div onClick={this.handleDelete.bind(this)}>{content}</div>)
}

---

• React 使用CSS样式修饰

  • <button style={{ background: 'red', color: '#fff' }} />
    第一个{}是指这是一个JS表达式，第二个{}是指这是一个对象

  • className='red-btn '
    不能用class因为会被认为是一个组件

  • <React.Fragment>替代<div>
    希望最外层没有div

  • 如果import React, { Component, Fragment } from React就可以简写