Reac入门

Posted 2021-01-31 love-life-insist

一：入门

1：chrome如何安装React dev Tools

https://blog.csdn.net/gezilan/article/details/79741578  React工具的安装

2：Hello React

    const vDom = <h1>Hello React</h1> // 千万不要加引号

    // 渲染虚拟DOM到页面真实DOM容器中

ReactDOM.render(vDom, document.getElementById(‘test‘))                                                 

3： 

1. 创建虚拟DOM

    /*方式一: 纯JS(一般不用)创建虚拟DOM元素对象*/

    const msg = ‘I Like You!‘

    const myId = test

 

    const vDOM1 = React.createElement(‘h2‘, {id: myId}, msg.toUpperCase())

    // 2. 渲染到真实页面

    const domContainer = document.getElementById(‘test1‘)

    // debugger

ReactDOM.render(vDOM1, domContainer)          

 

// 1. 创建虚拟DOM

    /*方式二: JSX创建虚拟DOM元素对象*/

    const vDOM2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>

    // debugger

    // 2. 渲染到真实页面

    ReactDOM.render(vDOM2, document.getElementById(‘test2‘))

 

4:组件化编程

 /*方式1: 工厂函数组件(简单组件)*/

function MyComponent () {

  return <h2>工厂函数组件(简单组件)</h2>

}

 

/*方式2:  ES6类组件(复杂组件)*/

class MyComponent2 extends React.Component {

  render () {

    console.log(this) // MyComponent2的实例对象

    return <h2>ES6类组件(复杂组件)</h2>

  }

 

二：组件的三大属性

 

1: state属性

一：概念理解

(1)    state是组件对象最重要的属性, 值是对象(可以包含多个数据)

(2)    组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

 

二．编码操作

(1)    初始化状态:

  constructor (props) {

    super(props)

    this.state = {

      stateProp1 : value1,

      stateProp2 : value2

    }

  }

(2)    读取某个状态值

  this.state.statePropertyName

(3)    更新状态---->组件界面更新

  this.setState({

    stateProp1 : value1,

    stateProp2 : value2

  })

   class Like extends React.Component{
       constructor(props){
           super(props)
           this.state = {
               isLikeMe : false
           }
           this.Change = this.Change.bind(this)
       }

       Change(){
           //点击的时候执行这个方法
           //设置状态数值
           const isLikeMe = !this.state.isLikeMe
           this.setState({
               isLikeMe
           })
       }

       render(){
         //执行渲染

        return <h2 onClick={this.Change}>{this.state.isLikeMe?"我喜欢你":"我不喜欢你"}</h2>
       }
   }
   //渲染组件
  ReactDOM.render(<Like/>,document.getElementById("example"))

　　

2: props属性

(1)    每个组件对象都会有props(properties的简写)属性

(2)    组件标签的所有属性都保存在props中

2 作用

(1)    通过标签属性从组件外向组件内传递变化的数据

(2)    注意: 组件内部不要修改props数据

 

class Person extends React.Component{

   render(){
       return (
           <ul>
               <li>name:{this.props.name}</li>
               <li>age:{this.props.age}</li>
               <li>sex:{this.props.sex}</li>
           </ul>
       )
   }

 }
const p1 = {
     name : "小名",
     age : 20,
     sex : "男"
}

 Person.propTypes = {
     name:PropTypes.string.isRequired,
     age:PropTypes.number.isRequired,
     sex:PropTypes.string.isRequired
 }
 Person.defaultProps = {
     name: ‘Stranger‘,
     age : 20,
     sex : "男"
 };

 ReactDOM.render(<Person {...p1}/>,document.getElementById("example1"))
 ReactDOM.render(<Person />,document.getElementById("example2"))

　　

问题: 请区别一下组件的props和state属性

1)         state: 组件自身内部可变化的数据

2)        props: 从组件外部向组件内部传递数据, 组件内部只读不修改

3: refs与事件处理

 

class Mycompent extends React.Component{

    constructor(props){
       super(props)
       this.Showinput = this.Showinput.bind(this)
        this.HandleBlur = this.HandleBlur.bind(this)
    }

   Showinput(){
        //点击的时候弹出 content数值
        const input = this.refs.content; //获取到input元素//类似于dom的标识
        alert(input.value)
    }

    HandleBlur(event){
          //event.target表示触发的这个元素
        alert(event.target.value)
    }

    render(){
        return (
           <div>
               <input ref="content" type="text"/>  
               <button onClick={this.Showinput}>点我</button>  
               <input type="text" placeholder="失去焦点" onBlur={this.HandleBlur}/>
           </div>
        )
    }
}

ReactDOM.render(<Mycompent/>,document.getElementById("example"));