【web】React框架——React组件(1)

1.组件介绍

1. 组件化的概念；

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

3. 特点:可复用、独立。

2.两种创建方式

2.1 函数组件

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

2. 函数名必须大写开头

3. 组件必须有返回值

4. function Hello(){ 
   return (
   	<div>333333333</div>
       ）
   }
   ReactDOM.render(<Hello />,document.getElementByld("root"))
   

2.2 类组件

1. 类名大写开头

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

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

4. render()必须有返回值

5. class Ok extends React.Component {
       render(){ 
   		return(
   			<div>你好 class</div>
               )
       }
   }
   ReactDOM.render(<Ok />, document.getElementByld("root"))
   

---

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

---

3.将组件代码放在独立的js文件

1. 创建组件js文件，eg.Book.js
2. 在Book.js文件中导入React
3. 实用类或者函数创建组件
4. 组件必须要导出才能使用
5. 在指定的文件中导入Book.js
6. 渲染组件

// 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.aetElementBvid("root"))

4.组件的样式

行内样式（官方推荐）

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

外部导入： 准备好外部css文件，在js中使用import引入 。
注意:class属性建议写为className。

5.ref获取dom

1. <p ref='myword'>你好</p >：可以通过 this.refs.myword获取p标签。

   ​ 注:refs将要被弃用，在严格模式下会报错。

2. 新写法：

   ``html
   myRef =React.createRef();

   ```

3. 如果ref绑定到组件上，我们会获得这个组件。

6.列表渲染

1. 使用 js 原生的 map 方法。

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

3. 为了列表的复用与重排，设置key值，提高性能。

7.条件渲染

1. {条件?

   yes

   :

   no

   }
2. {条件 &&

   ok

   }

8.富文本展示

<p dangerouslySetinnerHTML={
        {html:富文本}
}></p>

9.事件处理

1. 事件绑定:on+事件名称={fn}

   注意:这里要用驼峰命名法。

   <button onClick={()=>this.yes()}>1</button //比较推荐
       
   <button onClick={() => {
   	console.log(this) 
   }}>1</button> //比较推荐
       
   <button onClick={this.ok.bind(this)}>1</button>//不推荐
   <button onClick={this.myclick}>1</button>//不推荐
   //注意this指向问题
   

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