React核心知识点

React核心知识点

介绍

react是最近很是流行的框架，相对于vue框架，对js、es6以及以上的版本的语法要求会更高。核心是把设计好的UI划分成组件层级。

JSX的使用

js是JavaScript的语法扩展。在编译的时候JSX表达式会被转为不同js对象，所以把jsx表达式嵌入if语句或者for 也都是没有问题的.

# 基本表达式
  const element = 
Hello World!
# 嵌入函数中，编译成为函数组件
function geGretting(){
    return 
Hello Gretting 
;
}
# JSX使用特定属性
const element = 

 # jsx 表示对象
 const el = (
 

   Hello World!
 
 )
 
 React.createElement(
 'h1',
 {classNmae:'greeting'},
 'Hello World!'
 )

函数组件和class组件

# 函数组件
function Welcome (){
    return 
Hello World!
}
# class组件
class  Welcome extends React.Component{
    render(){
        return (
        
Hello World
        );
    }
}

父子组件之间通信

父组件向子组件传值

function Child(props){
    return 
{props.name}
}

class Parent extends React.Component{
     render(){
         return(
           ;
           ;
         )
     }
 }

子组件向父组件传值

class Child  extends React.Component{
    constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);  //重要操作
  }
 function handleChange(e){
     this.props.handleParent(e.target.value)
 }
   render(){
    return (
       
       )
    }
}

class Parent extends React.Component{
   constructor(props) {
    super(props);
    this.onHandle = this.onHandle.bind(this);  //重要操作
  }
  function onHandle(value){
      console.log("最终获取到从子组件传进的参数")
  }
     render(){
         return(
           ;
         )
     }
 }

Hook特性

Hook是react新增的一个属性，在不编写class组件的时候使用其他React的特性。

• 特性一：count属性相当于 this.state.count

function Example(){
    const [count,setCount] = useState(0) //初始化count为0
    return (
    
{count}
    {setCount(count+1)}} >
    )
}
#等价与如下
class Example extends React.Component{
    constructor(props){
        super(props);
        state={ count:0};
    }
    render(){
        return (
        
{count}
        {this.setState({count:count+1)}) } >
        )
    }
}

注意点：

• props的内容不可更改
• 组件名首字母大写
• 在return的内容最外层必须要有一个div大标签，或者用 包括在最外层