学习|React组件基础 javascript|前端|组件|react.js

react组件
组件就是一个页面中的部分功能，多个组件实现完整的页面功能
特点：可复用、独立、可组合
react组件的创建

使用函数创建组件
- 函数名称必须以大写字母开头
- 函数必须有返回值（返回值为null时，表示不渲染任何内容）

// 使用函数创建组件 function Hello() { return ( Hello 组件！ ) } ReactDOM.render(, document.getElementById('root'))

使用类创建组件

类名称也必须大写开头
类组件必须继承 React.component 父类，才可以使用父类中提供的方法和属性
类组件必须提供 render 方法
render 方法必须要有返回值，表示组价的结构

// 使用类创建组件 class Hello extends React.Component{ render() { return 类创建组件！ } } ReactDOM.render(, document.getElementById('root'))

抽离组件为单独 JS文件

创建 Hello.js 文件
在 Hello.js 中导入 React
创建组件
导出这个组件
在index.js导入Hello 组件
渲染组件

//Hello.js import React from 'react'class Hello extends React.Component { render() { return (Hello!) } }export default Hello//index.js // 导入Hello 组件 import Hello from './JS/Hello.js' ReactDOM.render(, document.getElementById('root'))

React事件处理

事件绑定
- 语法：on + 事件名称 = {事件处理方法} --- onClick = {...}
- React事件采用驼峰命名法 -----onClick 、 onFocus

// 函数事件绑定 function Hello() { function handleClick() { console.log('点击成功'); } return ( ) }ReactDOM.render(, document.getElementById('root'))

事件对象
- 通过事件处理程序的参数获取到事件对象
- 不需要担心跨浏览器兼容性问题

// 事件处理 class Hello extends React.Component{ handleClick(e) { // 阻止默认行为 e.preventDefault() console.log('点击成功！'); } render() { return 点击 } } ReactDOM.render(, document.getElementById('root'))

组件状态

有状态组件（类）：负责页面交互，更新页面
无状态组件（函数）：静态结构的展示
状态（state): 状态即数据，是组件内部的私有数据，只能在组件内部使用
- state 的值是对象，表示一个组件中可以有多个数据
- 通过 this.state 来获取状态

// 组件状态 class Hello extends React.Component{ // constructor() { //super()//// 初始化 state //this.state = { //count : 0 //} // }// 简化写法 state = { count : 0 }render() { return (计算机: { this.state.count }) } } ReactDOM.render(, document.getElementById('root'))

修改状态（setState）
- 语法：this.setState({...})
- 注意：不能直接修改 state 中的值
- setState作用：1.修改 State 2. 更新UI
- 【学习|React组件基础】思想：数据驱动视图

class Hello extends React.Component{ // constructor() { //super()//// 初始化 state //this.state = { //count : 0 //} // }// 简化写法 state = { count : 0 }render() { return (计算机: { this.state.count } ) } } ReactDOM.render(, document.getElementById('root'))