React- JSX的基本使用/组件的基本使用

React框架

用于构建用户界面的javascript库
  1. 发送请求获取数据
  2. 处理数据（过滤、整理格式等）
  3. 操作dom呈现页面
react是一个将数据渲染为HTML视图的开源javascript库   为什么要学react？ 原生js操作dom繁琐，效率低 使用js直接操作dom，浏览器会进行大量的重绘重排 原生js没有组件化编码方案，代码复用低   react特点 采用组件化模式、声明式编码，提高开发效率及组件复用率 在react native中可以使用react语法进行移动端开发 使用虚拟dom+优秀的diffing算法，尽量减少与真实DOM的交互   学习react需掌握的基础知识
  • 判断this的指向
  • class类
  • ES6语法规范
  • npm包管理器
  • 原型、原型链
  • 数组常用方法
  • 模块化

react基本使用

React脚手架的意义

使用react脚手架初始化项目 初始化项目：npx create-react-app my-app 启动项目,在项目根目录中：npm start 自动跳转浏览器，并且终端中显示succesfully

JSX（React核心内容）

简介

JSX是javascript XML的简写，表示在javascript代码中写XML（html）格式的代码 
//导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 创建react元素
const title = React.createElement('h1', null, 'hello react !!');

//渲染react元素
ReactDOM.render(title, document.getElementById('root'));

用JSX去做创建元素和渲染元素

//导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 使用JSX创建react元素
const title = 
hello JSXnnnnnnnn


//使用JSX渲染react元素
ReactDOM.render(title, document.getElementById('root'));
注意点： React元素的属性名使用驼峰命名法 特殊属性名：class->className\for->htmlFor\tabindex->tabIndex 没有子节点的React元素可以用/>结束 推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱  

嵌入JS表达式

通过{js表达式}  注意：js中的对象是一个例外，一般只会出现在style属性中 不能在{}中出现语句（比如：if/for等） 
//导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 使用JSX创建react元素
const name = 'jack'
const age = 19
const sayJi = () => "hi react"
//JSX自身也是一个js表达式
const dv = 
我是jsx

const title = (
  

    hello JSX
    姓名：{name}年龄：{age}
    
{3 > 5 ? 1 : 0}

    
{sayJi()}

    { dv}
  
)
//使用JSX渲染react元素
ReactDOM.render(title, document.getElementById('root'));

JS X的条件渲染

场景loading效果 条件渲染：根据条件渲染特定的JSX结构 
//条件渲染
const isLoading = true
//if-else
// const loaddata = () => {
//   if (isLoading) {
//     return 
loading...........

//   }
//   return 
数据加载完成，此处显示加载后的数据

// }
//三元表达式
// const loaddata = () => {
//   return isLoading ? (
loading...........
) : (
数据加载完成，此处显示加载后的数据
);
// }
//逻辑与运算符 只能实现显示或隐藏
const loaddata = () => {
  return isLoading && (
loading...........
)
}
const title = (
  

    条件渲染：
    {loaddata()}
  

)
//渲染
ReactDOM.render(title, document.getElementById('root'));

JSX的列表渲染

如果要渲染一组数据，应该使用数组的map方法 注意：渲染列表时应该添加key属性，key属性的值要保证唯一 原则：map（）遍历谁，就给谁添加key属性 注意：尽量避免使用索引号作为key 
//列表渲染
//列表
const songs = [
  { id: 1, name: '冰雨' },
  { id: 2, name: '背叛' },
  { id: 3, name: '晴天' }
];
const list = (
  
    
    {songs.map(item => 
  •  {item.name}
    • )}
  

)

ReactDOM.render(list, document.getElementById('root'));

JSX样式处理

1.行内样式-style 
//样式
const list = (
  

    JSX样式
  

)
ReactDOM.render(list, document.getElementById('root'));

2.类名-className

.title{
text-align: center;
}

 React组件基础

组件介绍

  1. 组件表示页面中的部分功能
  2. 组合多个组件实现完整的页面功能
  3. 特点：可复用、独立、可组合

组件的两种创建方式

1.使用函数创建组件 函数组件：使用JS的函数（或者箭头）创建的组件 约定1：函数名称必须以大写字母开头 约定2:函数组件必须有返回值，且返回值表示改组件的结构 
//函数组件
function Hello() {
  return (
    
这是第一个函数组件

  )
}
ReactDOM.render(< Hello />, document.getElementById('root'));
const Hello = () => (
这是第一个函数组件
)

ReactDOM.render(< Hello />, document.getElementById('root'));
2.使用类创建组件 类组件：使用ES6的class创建的组件 约定1:类名称也必须是大写字母开头 约定2:类组件应该继承React.Component父类中提供的方法或属性 约定3:类组件必须提供render（）方法 约定4:render（）方法必须有返回值，表示改组件的结构 
//创建类组件
class Hello extends React.Component {
  render() {
    return (
      
这是第一个类组件

    )
  }
}
ReactDOM.render(< Hello />, document.getElementById('root'));

把组件抽离为独立的JS文件

import React from 'react'
//创建组件
class Hello extends React.Component {
    render() {
        return (
            
hello ————————

        )
    }
}
//导出组件
export default Hello

引入组件

//导入Hello组件
import Hello from './Hello'
ReactDOM.render(< Hello />, document.getElementById('root'));

React事件处理

//事件处理
class App extends React.Component {
  //事件处理程序
  handleClick() {
    console.log('单机事件触发！！！');
  }
  render() {
    return (
      
    )
  }
}
ReactDOM.render(< App />, document.getElementById('root'));
//通过函数组件绑定事件
function App() {
  //事件处理程序
  function handleClick() {
    console.log('函数组件中事件绑定');
  }
  return (
    
  )
}
ReactDOM.render(< App />, document.getElementById('root'));

事件对象

//事件对象
class App extends React.Component {
  handleClick(e) {
    e.preventDefault()
    console.log('a标签的单机事件触发了');
  }
  render() {
    return (
      this.handleClick}>点击，不会跳转

    )
  }
}
ReactDOM.render(< App />, document.getElementById('root'));

有状态组件和无状态组件

函数组件又称无状态组件，类组件又称有状态组件 状态叫数据 函数组件没有自己的状态，只负责数据显示 类组件有自己的状态，负责更新UI，让页面动起来   state的基本使用 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用 state的值是对象，表示一个组件中可以有多个数据 
//state的基本使用
class App extends React.Component {
  // constructor() {
  //   super()
  //   //初始化state
  //   this.state = {
  //     count: 0
  //   }
  // }
  state = {
    count: 0
  }
  render() {
    return (
      

        
计数器：{this.state.count}

      

    )
  }
}
ReactDOM.render(< App />, document.getElementById('root'));

setState()修改状态

//setState的基本使用
class App extends React.Component {

  state = {
    count: 0,
    test: 'a'
  }
  render() {
    return (
      

        
计数器：{this.state.count}

        
      

    )
  }
}
ReactDOM.render(< App />, document.getElementById('root'));
注意：
  • 状态是可变的
  • 不要直接修改state中的值
  • 数据驱动视图

从JSX抽离事件处理程序

事件绑定this指向 1.箭头函数 
//事件处理程序
class App extends React.Component {
  state = {
    count: 0,
  }
  onIncrement() {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      

        
计数器：{this.state.count}

        
      

    )
  }
}
ReactDOM.render(< App />, document.getElementById('root'));
2.Function.prototype.bind() 将事件处理程序中的this与组件实例绑定道一起 
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0,
    }
    this.onIncrement = this.onIncrement.bind(this)
  }
  onIncrement() {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      

        
计数器：{this.state.count}

        
      

    )
  }
}
ReactDOM.render(< App />, document.getElementById('root'));

第三种方法

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0,
    }
  }
  onIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      

        
计数器：{this.state.count}

        
      

    )
  }
}
ReactDOM.render(< App />, document.getElementById('root'));

表单处理

1.受控组件

  • HTML中的表单元素是可输入的，也就是有自己的可变状态
  • 而React中可变状态通常保存在state中，并且只能通过setState（）方法来修改
  • React将state与表单元素值value绑定到一起，由state的值来控制表单元素的值
  • 受控组件：其值收到React控制的表单元素
//受控组件，其值受到react控制的表单元素
// 操作文本框的值
class App extends React.Component {
  state = {
    txt: ''
  }
  handleChange = (e) => {
    this.setState({
      txt: e.target.value
    })
  }
  render() {
    return (
      

        this.state.txt} onChange={this.handleChange}>
      

    )
  }
}


ReactDOM.render(< App />, document.getElementById('root'));
//受控组件实例
class App extends React.Component {
    state = {
        txt: '',
        content: '',
        city: 'gg',
        isChecked: false
    }
    handleForm = (e) => {
        //获取当前的dom对象
        const target = e.target
        //根据类型获取值
        const value = target.type === 'checkbox' ? target.checked : target.value
        //获取name
        const name = target.name
        this.setState({
            [name]: value
        })
    }
    // handleContent = (e) => {
    //     this.setState({
    //         content: e.target.value
    //     })
    // }
    // handleCity = (e) => {
    //     this.setState({
    //         city: e.target.value
    //     })
    // }
    // handleChecked = (e) => {
    //     this.setState({
    //         isChecked: e.target.value
    //     })
    // }
    render() {
        return (
            

                {/* 文本框 */}
                this.state.txt} onChange={this.handleForm} />
                

                {/* 复文本框 */}
                
                

                {/* 下拉框 */}
                
                {/* 复选框 */}
                this.state.isChecked} onChange={this.handleForm} />
            

        )
    }
}



ReactDOM.render(< App />, document.getElementById('root'));

非受控组件

//非受控组件
class App extends React.Component {
  constructor() {
    super()
    //创建ref
    this.txtref = React.createRef()
  }
  //获取文本框的值
  getTxt = () => {
    console.log('文本框的值：', this.txtref.current.value);
  }
  render() {
    return (
      

        this.txtref} />
        
      

    )
  }
}
ReactDOM.render(< App />, document.getElementById('root'));

案例：评论列表

//案例：评论列表
class App extends React.Component {
  state = {
    comments: [
      { id: 1, name: 'jack', content: '沙发！！！' },
      { id: 2, name: 'tom', content: '沙发！！！' },
      { id: 3, name: 'jonh', content: '沙发！！！' },
    ],
    //评论人 
    userName: '',
    //评论内容
    userContent: ''
  }
  //渲染评论列表
  renderList() {
    return this.state.comments.length === 0 ?
      (
暂无评论，快去评论吧
)
      : (
    
        {this.state.comments.map(item => (
          
  • 
            
    评论人：{item.name}
    
            
    评论内容：{item.content}
    
          
    • 
        ))}
      
)
  }
  //处理表单元素值
  handleForm = (e) => {
    const { name, value } = e.target
    this.setState({
      [name]: value
    })
  }
  //发表评论
  addComment = () => {
    if (this.state.userName.trim() === '' || this.state.userContent.trim() === '') {
      alert('请输入评论人和评论内容')
      return
    }
    const newComments = [{
      id: Math.random(),
      name: this.state.userName,
      content: this.state.userContent,
    }, ...this.state.comments]

    this.setState({
      comments: newComments,
      userName: '',
      userContent: ''
    })
  }
  render() {
    return (
      

        

          
            value={this.state.userName} placeholder="请输入评论人"
            onChange={this.handleForm} />