(一)Reac入门

一:入门

1:chrome如何安装React dev Tools

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

2:Hello React

    const vDom =

Hello React

// 千万不要加引号

    // 渲染虚拟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 =

{msg.toLowerCase()}

    // debugger

    // 2. 渲染到真实页面

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

 

4:组件化编程

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

function MyComponent () {

  return

工厂函数组件(简单组件)

}

 

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

class MyComponent2 extends React.Component {

  render () {

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

    return

ES6类组件(复杂组件)

  }

 

二:组件的三大属性

 

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 

{this.state.isLikeMe?"我喜欢你":"我不喜欢你"}

} } //渲染组件 ReactDOM.render(,document.getElementById("example"))

  

2: props属性

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

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

2 作用

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

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

 

class Person extends React.Component{

   render(){
       return (
           
  • name:{this.props.name}
  • age:{this.props.age}
  • sex:{this.props.sex}
) } } 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(,document.getElementById("example1")) ReactDOM.render(,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 (
           
     
) } } ReactDOM.render(,document.getElementById("example"));

  

转载于:https://www.cnblogs.com/love-life-insist/p/10207338.html

你可能感兴趣的:((一)Reac入门)