react个人知识点总结

React介绍：
简介：将用户界面抽象成个个组件，用于构建用户界面的javaScript库
特点：1.声明式设计 2.高效，虚拟DOM 3.灵活 4.JSX 5.组件 6.单向响应的数据流
核心：组件，函数式编程
精髓：函数式编程（提高代码复用率，降低测试难度，降低代码复杂度）

React基本配置：(想想自己如何搭建脚手架*）
React脚手架：1. create-react-app 2. Dva
安装：npm install create-react-app -g //全局安装
create-react-app 项目名 //创建项目
npm start 运行项目
配置：react 、 react-dom 、react-scripts

React基本语法：
注意：1.class使用的是className(使用className时需要注意只能在本组件的跟节点上使用)
2.使用变量 {变量}
3.ref属性:
通过refs 来得到dom节点
this.refs.名称、得到是dom这个节点
this.refs.名称.value;
老的字符串形式的方法，在严格模式下会报警告错误，解决方案，推荐使用refs的新方式，也可删除严格模式（index.js中）

React组件创建：
1.es6创建：主要
第一步：创建组件
import React from ‘react’
class 组件名extends React.Component{
render(){
return(

		<div>
      	 123
     	</div>

  	  	)
	  }

}
export {组件as default}
注意：1.组件首字母大写2.render组件只能有一个根节点3.注释要用{}包起来
第二步：导入组件
import 自定义组件名 from ‘组件相对路径’
第三步：使用组件
<自定义组件名/>
2.函数式定义的无状态组件：组件未被实例化，无生命周期，访问不到this
function 组件名(){

}
3.es5创建：
React.createclass({
render(){
}
})

React组件之间传值：
设置变量：在render()函数中设置变量。
父传子：1.父组件传值:<子组件 自定义属性={变量}/>
2.标签之间传值:

{变量}或者固定值

子组件接收值：
1.this.props.自定义属性
2.this.props.children
子传父：
1.父组件定义函数，引用组件绑定一个事件(自定义事件)，指定事件处理程序
例如：父定义函数：函数(obj子组件调用接收的参数){
处理事件
}
2.父传递函数:<子组件 自定义属性={this.函数.bind(this)}/>
3.子组件接受函数，用this.props.事件名(obj传递参数),调用事件处理程序
例如：子接收函数：函数（）{
this.props.事件名(obj传递参数)
}

React的事件处理：
1.react事件的命名采用小驼峰，而不是纯小写
列：onClick={this.函数名.bind(this)}
注意：在事件中没有绑定this，则需要自己通过[ .bind(this) ]绑定this。
2.函数写在class中

***React的组件数据存储：（constructor为构造函数）
constructor(props){
super(props)
this.state={
数据名：值
}
}
React的组件数据修改：（修改后可实现页面更新）：
this.setState({
数据名:[…this.state.数据名,obj]
//注意：复杂数据需要改变时需要创建一个新的复杂数据地址改变
})
注意：1.如果constructor 函数需要使用props（this.props.自定义属性名）则需要在函数形参加props，2.数据只能在本组件访问与使用，3.使用方法为this.state.数据名

React事件对象：函数名（e）{
Console.log(e) //直接打印看不了数据
e.persist() //在Console.log(e)则可以查看事件对象
}

React中state总结：
state:存储当前组件的状态，只在本组件使用
this.setState方法来进行更新，且重新渲染页面

React中state与props的区别
props是指组件间传递的一种方式，props自然也可以传递state。由于React的数据流 是自上而下的，所以是从父组件向子组件进行传递；另外组件内部的this.props属性是 只读的不可修改！
state是组件内部的状态（数据），不能够直接修改，必须要通过setState来改变值的状 态，从而达到更新组件内部数据的作用。
props和state是经常要结合使用的，父组件的state可以转化为props来为子组件进行 传值。在这种情况下，子组件接收的props是只读的，想要改变值，只能通过父组件的 state对其进行更改

React装饰器
http://bugshouji.com/sharebird/t1216
https://es6.ruanyifeng.com/#docs/decorator

React自带函数：
1.构造函数：
constructor(props){
super(props)
this.state={
数据名：值
}
}
2.生命周期函数：
参考：https://www.jianshu.com/p/b331d0e4b398