（一）Reac入门

一：入门

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"));

猜你喜欢