React

一，特点

1.声明式设计，react采用声明规范，可以轻松描述应用
2.高效，react通过对DOM的模拟（虚拟DOM），最大限度的减少与DOM的交互
3.灵活，react可以与已知的库或框架很好地配合
4.JSX，JSX是Javascript语法的扩展
5.组件，通过react构建组件，使得代码容易得到复用
6.单向响应的数据流，从而减少了重复代码

二，视图层的开发模式与函数式编程

react是创建组件的一个库，并不是完整的MVC,MVVM框架，它仅仅是MVC中的V层，专注于提供清晰，简洁的View层解决方案。
函数式编程是react的精髓。react把过去不断重复构建UI的过程抽象成了组件，且在给定参数的情况下约定渲染对应的UI界面，react能充分利用很多函数式方法减少冗余代码，此外，由于它本身就是简单函数，所以易于测试。

三，JSX语法与组件

jsx === js + xml

React.render(<div>hello world</div>,document.getElementById("root"));

//babel - loader  <div></div>
React.createDom("div","hello world")
React.render(<app>,document.getElementById("root")); //把组件渲染到root中

四，react组件写法

1.组件首字母是大写，会被认为是自定义组件 。首字母小写，会被认为是原生dom节点
2.组件最外层需要一个标签包裹，不能有兄弟节点
3.return（加上小括号，可以回车）
4.组件可以嵌套
5.函数式写法和class写法（无状态组件的编写方式）
6.注释的写法｛这里写注释｝｛//单行｝｛/多行/｝
7.样式

1.类组件

import React from 'react'

class App extends React.Component{
	//生命周期
	render(){ //渲染，类中的一个方法
		return <div>hello world</div> //返回值是组件
	}
}

import React，{Component} from 'react'
class App extends Component{
	render(){ 
		return <div>hello world</div>
	}
}

2.函数式组件

function App(){
	return <div>hello world</div>
}
export default App

五，样式

1.class >className
for>htmlFor (label)
2.行内样式（facebook推荐），注意font-size的写法

import React from 'react'

//all in js ,react的思想，都在js里
var App = ()=> {
	var styleObj ={
		backgroundColor : 'red',
		fontSize: '30px'
	}

	return <div style={styleObj}>1111</div>
}	
export default App

老版本中， class容易和类混淆，所以要写成className。新版本优化了，写不写都可以。

import React from 'react'
.active{
		backgroundColor :red,
		fontSize: 30px
	}

import './css/index.css'
var App = ()=> {
	return <div className="active">1111</div>
	<div>{10>20?'aaa':'bbb'}</div>
	<div>{//表达式语法，不支持语句if else switch for while do while}
	</div>
}	
export default App

六，事件

a.箭头函数
b.bind改变this指向
c.与普通函数的区别
所有react的事件， 都被document代理了，所以写事件，只是写了个回调函数

import React，{Component} from 'react'
class App extends Component{
	render(){ 
		return <div>
		hello world
		<button onClick={()=>{
			console.log("111")
		}}Click</button>
		<button onClick={this.hanleClick2}click2</button>
		<button onClick={this.hanleClick3}click3</button>
		</div>
	}

	handleClick2(){
		console.log("222",this)
	}
	handleClick3 =()=>{
		console.log("333",this)
	}
}
export default App

七，ref

给普通的dom加上ref属性， 表示拿到标签的原生节点

<input type="text" ref="mytext"/>
<button onClick={()=>{
	console.log(this.refs.mytext.value)
}}>click1</button>

<button onClick={this.handleClick3}>click3</button>

handleClick3 = ()=>{
	console.log(this.refs.mytext.value)
}

<input type="text" ref="mytext"/>
<button onClick={this.handleClick2.bind(this)}>click2</button>
handleClick2(){
	console.log(this.refs.mytext.value) //不用bind, 此时this是undefined
}

1.给标签设置 ref = “username”
通过这个获取this.refs.username ,ref可以获取到应用的真实dom
z
2.给组件设置ref = “username”
通过这个获取this.refs.username ，ref可以获取到组件对象

3.给标签设置 ref ={(el) =>{myele = ele;}}
访问myele

八，react组件的两种数据挂载方式

属性是父组件传的，不允许修改 ，状态是组件自己有的。

1.状态 state
两种state都可以

class App extends Component {
    constructor(){
        super()
        this.state = {
            name:'shirley'
        }
    }

    state={
        name:'shirley'
    }
    render() {
        return <div>
            hello world
        </div>
    }
}

setState，react封装的方法，来修改dom

class App extends Component {
    state = {
        name: 'shirley',
        isCreated: true
    }
    render() {
        return <div>
            hello world -- {this.state.name}
            <button onClick={this.handleClick}>click</button>
             {this.state.isCreated ? <div>created</div> : null} //注意，没有引号是js，如果加引号，变成字符串了
        </div>
    }

    handleClick = () => {
        // this.state.name = "xiaoming" //不能这么修改状态，拦截不到dom节点的改变
        this.setState({
            name: 'xiaoming',
            isCreated: !this.state.isCreated
        })
    }
}

函数式组件，不支持状态，hooks支持。

2.属性
props

let {mytitle,myshow} = this.props

return <div>
		Navbar --{mytitle} 
	</div>

属性格式,属性验证

propTypes
import mymethods from ‘prop-types’

import mymethods from 'prop-types'
Navbar.propTypes ={
	myshow:mymethods.bool
}

return <div>
		<Navbar mytitle={this.state.appname} myshow={true}> </Navbar>
	</div>

九，受控与非受控组件

受控和不受控指的是能不能在开发者不控制组件属性的时候，组件自己管理状态，而当开发者控指组件属性时，组件该由属性控指。