【前端】React基础2---React组件1

一、组件介绍

1. 组件化的概念
2. 代表页面中的某部分及功能
3. 特点：可复用、独立

二、俩种创建方式

1.函数组件：使用JS函数创建的组件

                     函数名必须大写开头

                     组件必须有返回值

function Hello(){

return(

    <div>333333</div>

  )

}

ReactDOM.render(<ok />,document.getElementById("root"))

2.类组件：

类名大写开头

类组件应继承React.Component父类

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

Render( )必须有返回值

function Hello( ) {

render( ){

return(

<div>你好 class</div>

   )

 }
 
}

ReactDOM.render(<ok />,document.getElementById(“root”))

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

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

   1.创建组件js文件，eg.book.js

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

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

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

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

   6.渲染组件

   7.Book.js  

import React, { Component } from 'react'

export class Test extends Component {

               render() {

                     return (

                         <div> </div>

                         )

                     }

}

export default Test   //导出

    8.index.js

  import React from "react";

  ReactDOM.render(<Test />)

  document.querySelector("#root");

四、组件的样式

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

<div>

     {第一个{}是JSX语法 第二个是{}是对象

     <p style={{ color:’red’}}today </p>

     <p style={style}is very good! </p>

</div>

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

注意：class属性建议写为className

五、ref获取dom

1.<p ref=’myword’>你好</p>

可以通过外部css文件，在js中使用import 引入

注意: 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>}

2.{条件&&<p>ok</p>}

八、富文本展示

<p dangerouslySetInnerHTML={

     {__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并不会真的绑定一个事件到具体的元素上，而是采用事件代理的模式。