小白学习react知识点总结！！！

为什么要学习react?

1. 原生JS操作DOM繁琐，效率低
2. 使用JS直接操作DOM,浏览器会进行大量的重绘重排
3. 原生JS没有组件化编码方案，代码复用低

react基础知识

react特点：

1. 采用组件化模式，声明式编码，提高开发效率及组件复用率
2. 在react native中可以使用react语法进行移动端开发
3. 使用虚拟dom+diffing算法，尽量减少与真实Dom的交互

组件三大核心属性 1:state

对state的理解

1. state是组件对象中最重要的属性，值是对象(可以包含多个key-value的组合)
2. 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示(重新渲染组件)

state的基本使用

state是用来存放数据并接收数据，可以动态的改变进而改变页面的显示。所以state中组件的数据来源分为两部分，一个是组件自身的state,一个是接受父组件传入的props，这两种状态的改变都会造成 视图层面的更新。
我们需要注意的是，更改组件内部状态一定要通过setState进行更新组件内部数据的，直接赋值的话并不会触发页面的更新的。

setState的使用

状态必须通过setSatte进行更新,不是替换。

要注意的点

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？

• 强制绑定this:通过后汉书对象的bind()
• 箭头函数

4. 状态数据，不能直接修改或更新

//创建组件
class Weather extends React.Component{
//构造器调用几次
constructor(props){
super(props)
//初始化状态
this.state={isHot:false}
//解决changeWeather中this指向问题
this.changeWeather=this.changeWeather.bind(this)
}
//render调用几次？——1+n次 1是初始化的那次 n是状态更新的次数
render(){
//读取状态
const {isHot}=this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热':'凉爽'}</h1>
}
//changeWeather调用几次？——点几次调用几次
changeWeather(){
//获取原来的isHot值
const isHot=this.state.isHot
//注意：状态必须在state中更新，且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
}
}
//2.渲染组件到页面
ReactDom.render(<Weather/>,document.getElementById('test'))

Sate的简写方式

//创建组件
class Weather extends React.Component{
//初始化状态
state={isHot:false}
render(){
//读取状态
const {isHot}=this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热':'凉爽'}</h1>
}
//自定义方法——要用赋值语句的形式+箭头函数
changeWeather=()=>{
const isHot=this.state.isHot
this.setState({isHot:!isHot})
}
//2.渲染组件到页面
ReactDom.render(<Weather/>,document.getElementById('test'))

组件三大核心属性2:props

对props的理解

1. props是只读的
2. 每个组件对象都会有props(properties的简写)属性
3. 组件标签的所有属性都保存在props中

props的作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意：组件内部不要修改props数据

props的使用

1. 内部获取某个属性值
   this.props.name
2. 对props中的属性值进行类型限制和必要性限制
3. 扩展属性：将对象的所有属性通过props传递
   <Person{...person)/>
4. 默认属性值
5. 组件类构造函数