React基础语法

1.函数组件的创建和渲染

1．组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签

2．函数组件必须有返回值，表示该组件的UI结构;如果不需要渲染任何内容，则返回null

3.组件就像HTML标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容
4．使用函数名称作为组件标签名称，可以成对出现也可以自闭合
 

2.类组件的创建和渲染

import React from "react";
 
 class Hellow extends React.Component{
   render(){
     return  <div>这是一个类组件</div>
   }
 }
function App() {
  return (
    <div className="App">
    <Hellow></Hellow>
    </div>
  );
}
 
export default App;

注意：类组件的名称也必须以首字母大写开头

类组件应该继承React.Component父类，从而使用父类中提供的属性和方法

类组件必须提供Rander（），Rander必须有返回值，表示该组键UI结构

3.事件绑定

语法：on+事件名称=｛事件处理函数｝，比如：<div onClick={()=>{}}></div>

注意点：React中采用驼峰命名法，

 函数组件中绑定事件

const click=()=>{
  alert('事件被触发了')
}
 function Fun(){
   return <span onClick={click}>你好啊</span>
 }
 
function App() {
  return (
    <div className="App">
    <Fun></Fun>
    <Hellow></Hellow>
    </div>
  );
}
 
export default App;

类组件中事件绑定

事件回调函数的标准写法（避免this的指向问题  ）

这样写回调函数中的this指向的是当前对象组件中的实例对象

 
 class Hellow extends React.Component{
   clickHander=()=>{
     alert('类组件中的方法被调用')
   }
   render(){
     return  <div onClick={this.clickHander}>这是一个类组件</div>
   }
 }
function App() {
  return (
    <div className="App">
    <Fun></Fun>
    <Hellow></Hellow>
    </div>
  );
}
 
export default App;

4.组件状态

状态：就相当于Vue中的data中数据，自己内部可以调用的属性或方法

这里先以类名组件为例，函数组件后面再做详细说明

1.编写状态必须在state实例属性的方法 提供一个对象    

2.修改state中的任何属性   都不可以直接赋值   必须走setState方法  这个方法通过继承得到 

 
import React from "react";
class FunctionRander extends React.Component{
 
  state={
    name:'这是组件中的状态'
  }
  render(){
  return( 
    <>
  <div>今天好热</div>
  <p>{this.state.name}</p>    //获取状态
  
  </>
 
  )
  }
}
function App() {
  return (
    <div className="App">
    <FunctionRander></FunctionRander>
    </div>
  );
}
 
export default App;

5.表单处理

能够使用受控组件获取文本框的值

React处理表单元素一般有两中

   1.受控组件（推荐使用）

   2. 非受控组件（了解）

1.受控组件

被react的状态控制的组件（将react中state与表单元素中value绑定到一起，由state控制表单数据） 

也就是vue中v-model的原理

import React from "react";
class Zt extends React.Component{
  state={
  msg:'this.is'
   }
  
 changeHandler = (e) => {
    this.setState({ msg: e.target.value })
  }
  render(){
    return (<>
     <input value={this.state.msg} onChange={this.changeHandler} />
    </>)
  }
}
function App() {
  return (
    <div className="App">
   <Zt></Zt>
    </div>
  );
}
 
export default App;

 2.非受控组件

相似与VUE3中的ref,

import React, {createRef} from "react";
class Zt extends React.Component{
 msgRef=createRef()
 getValue=()=>{
   console.log(this.msgRef.current.value);
 }
  render(){
    return (<>
     <input ref={this.msgRef} />
     <button onClick={this.getValue}>读</button>
    </>)
  }
}
function App() {
  return (
    <div className="App">
   <Zt></Zt>
    </div>
  );
}
 
export default App;