目录
state是内部属性，props是为了更好地实现复用性，从外部接收数据。
1、componentWillReceiveProps(nextProps)
2、shouldComponentUpdate(nextProps,nextState)
5、componentDidUpdate(preProps,preState,value)
React组件
组件介绍：组件化概念、代表页面中的某部分及功能、独立可复用
一、两种创建方式
函数组件
1、使用JS函数创建的组件
2、函数名必须大写开头
3、组件必须有返回值
例如：
function Hello() {
return (
<div>333333</div>
)
}
ReactDOM.render(<Hello/>,document.getElementById("root"))类组件
1、类名大写开头
2、类组件应继承 React.Component 父类
3、类组件必须提供 render() 方法
4、render() 必须有返回值
例如：
class Ok extends React.Component {
render() {
return (
<div>ok</div>
)
}
}
ReactDOM.render(<OK/>, document.getElementById("root"))二、将组件放在独立的js文件中
步骤：
1、创建组件js文件，eg: Book.js；
2、在Book.js文件中导入React；
3、实用类或者函数创建组件；
4、组件必须要导出才能使用；
5、在指定的文件中导入Book.js；
6、渲染组件。
例如：
Book.js
// Book.js
import React from 'react'
class Book extends React.Component {
render() {
return(
<h1>读书明智</h1>
)
}
}
// 导出
export default Bookindex.js
import Book from './Book'
ReactDOM.render(<Book/>,document.getElementById("root"))三、组件的样式
1、行内样式
2、外部导入
（1）准备好外部 CSS 文件，在 js 中使用import引入
注意：class属性建议写为className
四、ref 获取 dom
<p ref='myword'>你好</p>可以通过 this.refs.myword 获取p标签
注：refs 将要被弃用，在严格模式下会报错
新写法:
myRef = React.createRef();
<div ref={this.myRef}></div>如果 ref 绑定到组件上，我们会获得这个组件。
五、列表渲染（一中有记，这里就省略）
六、条件渲染
1、{ 条件 ？<p>yes</p> : <p>no</p> }
2、{ 条件 && <p>ok</p> }
七、事件处理
1、事件绑定
on+事件名称={fn} 注：这里要用驼峰命名法
例如：
<button onClick={this.myclick}>1</button>
<button onClick={()=>{
console.log(this);
}}>1</button>八、状态 state
设置 state 的组件称之为有状态组件，没有设置 state 的组件称之为无状态组件。
组件中的数据
例如：
1、
class A extends Component {
state = {key:value}
}2、
class A extends Component {
constructor() {
super();
this.state = {
key: value
}
}
}注意：
（1）在类中定义 state (只能写这个名字) 对象--------state = {key:value}；
（2）不要直接修改 state : this.state.ok='ok' -------- 使用setState({key:value})
（3）setState注意：
在同步逻辑中，异步更新状态与真实dom；
在异步逻辑中，同步更新状态与真实dom；
接受第二个参数，是个回调函数，在这里状态与dom更新完毕。
九、属性props（只读）
state是内部属性，props是为了更好地实现复用性，从外部接收数据。
1、某组件：
{/*属性*/}
<MyNav title={this.title} leftBtn={isShowLeft}/>2、MyNav.js:
render() {
let {title,leftBtn} = this.props;
return (
<div>
{leftBtn && <button>left</button>}
<p>{title}</p>
</div>
)
}属性验证：
import myprop from 'prop-types'
static propTypes = {
title:myprop.string,
leftBtn:myprop.bool
}默认属性：
static defaultProps = {
title:'标题'
}属性与状态总结：
（1）属性是父组件对子组件的数据传输与操作；
（2）状态是组件自己内部的数据。
十、生命周期（钩子函数）
只有类组件（函数组件需要hooks支持）
初始化阶段
1、componentWillMount
组件即将挂载，render 之前最后一次修改 state 的机会；
常用于：state的初始化；
备注：如果有警告，可使用 UNSAFE_componentWillMount ；
2、render
只能访问 props 于 state ，不能修改 state 及进行 dom 输出；
3、componentDidMount
成功执行完毕 render 并完成 dom 节点的渲染，可以对dom 进行修改；
常用于：axios请求，订阅函数调用，计时器，dom操作；
运行中阶段
1、componentWillReceiveProps(nextProps)
父组件修改属性触发；
最先获取父组件传来的属性，可以在这里进行 axios 请求或者其他逻辑处理；
备注：如果有警告，可使用 UNSAFE_componentWillReceiveProps ；
2、shouldComponentUpdate(nextProps,nextState)
返回false,会阻止render的调用；
参数是被修改之后新的属性及状态；
3、componentWillUpdate
组件将要更新，不能修改属性及状态；
备注：如果有警告，可使用 UNSAFE_componentUpdate ；
4、render 同初始化中的render
5、componentDidUpdate(preProps,preState,value)
可以修改 dom；
参数是被修改之前的属性及状态；
销毁阶段
1、componentWillUnmount
再删除组件前进行清理工作。