React基础

JSX中判断

三元运算符

var flag=true
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
     <>
        {flag?'你好':'他好'}
        {flag?<button>点击一次</button>:<button>点击两次</button>}
        <div className={flag?'pink':'red'}>控制这个div中的文字的颜色</div>     
     </>
);

短路运算符

{false&&<input type='text' />}

react中的组件

一个js文件就是一个组件  js和html组合到在一起就是JSX

• 函数组件（无状态的组件）
  • 16.8版本以后，也有状态  Hook  (主流)
  • 没有自己的生命周期
  • 不需要继承   component
  • 利用函数的第一个参数来接收父组件传递的值

  • // 无状态组件   ()=>()
    const App=()=>(
                <>
                    <h1>欢迎使用React有状态的组件</h1>
                    <div>class类就是有状态的组件</div>
                </>
            )
    // 导出创建的APP组件
    export default App

• 类组件（有状态的组件或者class类）
  • 这个组件拥有状态  state 16.8版本之前主流
  • 拥有自己的生命周期
  • 需要继承react中自带的组件  component
  • 使用this.props来接收父组件传递的值

  • // // 1.导入react中的Component组件(抽象类，制定了一种标准)
     import { Component } from "react";
    
    
    // // 有状态组件的创建
     class App extends Component {
         //就是一个渲染的方法，在这个方法中书写JSX代码
         render(){
             // return时需要一个根节点
                 <>
                     <h1>欢迎使用React有状态的组件</h1>
                     <div>class类就是有状态的组件</div>
                 </>
             )
         }
      }
    
    // 导出创建的APP组件
    export default App

 react中的样式

        1.行内样式

                style = {{key:value}}

        2.使用类名

                会将外部文件中的样式以内嵌的形式，加载index.html

                在组件中会发生冲突

        3.使用sass

                安装sass   npm i sass

                创建一个scss样式文件   scss.csss

                在组件中导入 import  './scss.css'

        4.使用react自带的模板语法（css的模板化）

                在定义一个css文件时，xxx.module.css

                

//使用react自带的模板样式  styles就是模板样式中的处理过后类名
// import styles from './css/app.module.css'


//css in js 最终将样式编译成行内样式
import Radium from 'radium';
var style1 = {
  red:{
    'color':'red'
  },
  pink:{
    'color':'pink'
  }
}

//无状态组件  ()=>()
const App=()=>(
  <div id="box">
    <h1 style={style1.red} >欢迎使用React有状态的组件</h1>
    <div style={style1.pink}>class类就是有状态的组件</div>
  </div>
)

//导出创建的App组件
export default Radium(App)

        让js,html,css处于同一个文件中 css  in  js

事件

react中的事件，属于合成事件  react对原生的事件进行封装

1.事件绑定方式

// // 1.导入react中的Component组件(抽象类，制定了一种标准)
import { Component } from "react";

//有状态组件的创建
class App extends Component{
  num = 10
  // 就是一个渲染方法,在这个方法中书写JSX代码
  render(){
    // return时需要一个根节点
    return(
      <>
        <h1>事件的绑定方式</h1>
        {/* 点击按钮，在控制台输出薛之谦穿大花袄 */}
        {/* 事件类型的首字母需要大写 */}
        <button onClick={()=>{
          console.log('薛之谦穿着大棉袄')
          //要触发的函数
        }}>按钮</button>

        {/* 点击按钮，触发changefun */}
        <button onClick={this.changefun}>点击触发一个函数</button>

        {/* 点击按钮，触发changefun1 输出num中的值 */}
        <button onClick={this.changefun1.bind(this)}>触发函数，输出值</button>

        {/* 点击按钮触发  fn1事件 最常用  不会自动执行  可以传参 */}
        <button onClick={()=>{
          this.fn1(123)
        }}>触发fun1</button>

        <button onClick={(e)=>{
          this.lookevent(e)
        }}>查看事件对象</button>

      </>
    )
  }
  changefun(){
    console.log(1);
  }
  changefun1(){
    console.log(this.num);
    console.log(this);
  }
  fn1(ele){
    console.log(ele);
    console.log(this.num);
  }
  lookevent(e){
    console.log(e);
  }
}

2.事件对象

当一个事件发生时，和这个事件相关的所有的内容，都会放在一个对象中    event     e 

render(){
    // return时需要一个根节点
    return(
      <>
        <h1>事件的绑定方式</h1>
        <button onClick={(e)=>{
          this.lookevent(e)
        }}>查看事件对象</button>

      </>
    )
}

lookevent(e){
    console.log(e);
  }

3.ref

也可以用来获取元素或者是组件

// 1.导入react中的Component组件,导入ref
import { Component,createRef } from "react";

class Ref extends Component{
    btn1 = createRef();         //创建一个ref节点
    btn2 = createRef();
    render(){
        return(
            <>
                <h1>Ref组件</h1>
                {/* 将创建ref节点绑定到元素身上 */}
                <button ref={this.btn1} onClick={()=>{
                    this.getref()
                }}>按钮</button>

                <button ref={this.btn2} >123</button>
            </>
        )
    }
    getref(){
        // 直接获取元素中的内容
        console.log(this.btn1.current.innerHTML);
        this.btn1.current.style.background='pink'
        console.log(this.btn2.current);
    }
}
export default Ref