目录

React组件

一、两种创建方式

函数组件

类组件

二、将组件放在独立的js文件中

三、组件的样式

四、ref 获取 dom

五、列表渲染（一中有记，这里就省略） 

六、条件渲染

七、事件处理

八、状态 state 

组件中的数据

九、属性props（只读）

state是内部属性，props是为了更好地实现复用性，从外部接收数据。

十、生命周期（钩子函数）

初始化阶段

1、componentWillMount

2、render

3、componentDidMount

运行中阶段

1、componentWillReceiveProps(nextProps)

2、shouldComponentUpdate(nextProps,nextState)

3、componentWillUpdate

4、render 同初始化中的render

5、componentDidUpdate(preProps,preState,value)

销毁阶段

1、componentWillUnmount

---

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 Book

index.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

再删除组件前进行清理工作。