React-3 组件知识

目录

一、组件介绍

1、组件化的概念

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

3、特点：可复用、独立

二、两种创建方式

1、函数组件

2、类组件

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

1、创建组件js文件，eg.Book.js

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

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

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

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

6、渲染组件

四、组件的样式

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

2、外部导入

五、ref获取dom

1、示例

2、新写法

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

六、列表渲染

1、使用js原生的map方法

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

七、条件渲染

1、三元运算符：条件 ？yes  :  no

2、与运算（&&）：条件  &&  ok

八、富文本展示

九、事件处理

1、事件绑定：on + 事件名称 = { fn }

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

---

一、组件介绍

1、组件化的概念

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

3、特点：可复用、独立

二、两种创建方式

1、函数组件

（1）使用JS函数创建的组件

（2）函数名必须大写开头

（3）组件必须有返回值

function Hello(){
     return(
        <div>3333333</div>
     )
}
ReactDOM.render(<Hello />,document.getElementById<"root">)

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

2、类组件

（1）类名大写开头

（2）类组件应继承React.Component父类

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

（4）render()必须有返回值

class  Ok  extends React.Component{
      render(){
           return(
              <div>你好class</div>
           )
      }
}

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

1、创建组件js文件，eg.Book.js

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

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

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

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

6、渲染组件

Book.js

// Book.js
import React from 'react'

export Book extends React Component {
  render() {
    return (
      <h1>读书明智</h1>
    )
  }
}
// 导出
export default Book

index.js

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

四、组件的样式

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

<div>
    {
     /* 第一个{ }是JSX用法
     第二个{ }是对象*/
     <p style={ {color:'red'} }>today</p>
     <p style={style}>is very good!</p>
     }
</div>

2、外部导入

（1） 注意好外部css文件，在js中使用import引入

（2）注意：class属性建议写为className

五、ref获取dom

1、示例

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

<p ref='myword'>你好</p>

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

2、新写法

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

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

六、列表渲染

1、使用js原生的map方法

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

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

七、条件渲染

1、三元运算符：条件？<p>yes</p> : <p>no</p>

render() {
    const {type} = this.state
    return (
        <div>
            {
                //利用三元运算符渲染需要渲染的变量
                type === 优秀 ? <h2>type值等于优秀</h2> : 
                <h2 className="score">type值不等于优秀</h2>
            }
        </div>
    );
}

2、与运算（&&）：条件 &&<p>ok</p>

render() {
    const {type} = this.state
    return (
        <div>
            {type === 优秀 && <h2>type值等于优秀</h2>}
            {type !== 优秀 && <h2 className="score">type值不等于优秀</h2>}
        </div>
    );
}

八、富文本展示

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

  注意：这里要用驼峰命名法 

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