React-3（组件）

目录

一、组件介绍

二、两种创建方式

1、函数组件

2、类组件

三、将组件代码放在独立的js文件

四、组件的样式

1、行内样式（官方推荐）

2、外部导入

五、ref获取dom

六、列表渲染

七、条件渲染

1、三目运算符

2、&&

八、富文本展示

九、事件处理

---

一、组件介绍

组件化的概念

代表页面中的某部分及功能

特点：可复用、独立

二、两种创建方式

1、函数组件

使用JS函数创建的组件

函数名必须大写开头

函数名必须有返回值

注意：16.8之前   函数组件是无状态组件，16.8以后，加入了react-hooks

function Hello(){
     return(
        <div>hello</div>
     )
}

2、类组件

类名大写开头

类组件应继承React.Component父类

类组件必须提供render()方法

render()必须有返回值

class Hell extends Component {
  render() {
    return (
      <div>Hell</div>
    )
  }
}

三、将组件代码放在独立的js文件

1、创建组件js文件，例如：Nav.js

2、在Nav.js文件中导入React

3、使用类或者函数创建组件

4、组件必须要导出才能使用

5、在指定的文件中导入Nav.js

6、渲染组件

7、Nav.js

//Nav.js
import React, { Component } from 'react'

export class Nav extends Component {
  render() {
    return (
      <div>Nav</div>
    )
  }
}
//导出
export default Nav

8、index.js

import Nav from './Nav.js'
import ReactDOM.render(<Nav />,document.getElementById('root'))

四、组件的样式

1、行内样式（官方推荐）

    <div>
    {
         //第一个{}是JSX用法
         //第二个{}是对象
         <p style={ {color:'red'} }>aa</p>
         <p style={style}>bb</p>
     }
    </div>

2、外部导入

准备好外部css文件，在js中使用import引入

注意：class属性建议写为className

五、ref获取dom

1、<p ref='a'>你好</p>

可以通过 this.refs.a获取p标签

注意 ：ref将要被弃用，在严格模式下会报错

2、新写法

myRef = React.createRef( )
<div ref={this.myRef}></div>

3、如果ref绑定到组件上，我们会获取这个组件

六、列表渲染

使用 js原生的map方法

    <ul>
        {
            this.state.arr.map(item => <li key={item.id}>{item}</li>)
        }
    </ul>

注意：为了列表带的复用与重排，设置key值，提高性能

七、条件渲染

1、三目运算符

条件  ？<p>yes</p>  :  <p>no</p>

2、&&

条件   &&   <p>ok</p>

八、富文本展示

<p dangerouslySetlnnerHTML={{__html: 富文本}}></p>

九、事件处理

1、事件绑定

on + 事件名称 = {fn}

注意：用驼峰命名法

<button onClick={this.myclick}>1<button>

<button onClick={() => {console.log(this)}}>1</button>

<button onClick={this.ok.bind(this)}>1</button>

<button onClick={() => this.yes() //推荐}>1</button>

注意this指向问题

2、React并不会绑定一个事件到具体的元素上，而是采用事件代理的模式