React笔记_代码007

本文介绍: Re a ctDo m.render() 渲染页面。

Re a ct

目录 结构入口文件

Re a ct是 Re a ct 的核心库

Re a ctDo m是提供与 DOM 相关的功能

Re g i ste rSe r vi ceWo rk e r 加快 react的运行 速度的一个 js 文件

Re a ctDo m.render() 渲染页面

Re ac t 创建 组件

render里边放的模板是HTML和Ja vaScri p t的结合 jsx

创建子组件

App.js 根组件
文件名首字母大写类名首字母大写
引入组件
- import Ho me f ro m ‘./components/Ho me’
render单个div 可以不写();如果多个，需要用括号，并且需要一个大的di v（根节点）包含起来
构造函数 constructor
- 需要写super();
  - super 关键字，代表父类中的实例，即父类的th i s 对象是必须写的
  - 如果需要父子组件传值需要写成super(props)
  子类需在const ruc t o r 方法中调用 super 方法，否则新建实例时会报错，这是因为子类没有自己的th i s 对象，而是继承父类的th i s 对象
```
  constructor(props){
     super(props);
  }
```
- 可以定义数据
```
   this.state = {
       name: 'zhangsan'
   }
```
继承有两种写法
- class Home extend s Comp onen t{} 引入{ Comp onen t }
- class Home extend s React.Comp onent{}

绑定 数据 绑定 对象 绑定 属性 {th i s.state.n a me}

react绑定属性要注意
- class要换成className
- for要换成htmlFor
- style style={{“color”:‘red’}}
- 其他属性以前一样

  <div title={this.state.title}&gt;绑定数据</div>   
  <div className='red'>绑定数据</div> 
  <div style={{'color':'red'}}>绑定数据</div> 
  <label htmlFor="name"></label>  
  <input id="name"/>

引入 图片

引入本地图片

一种方法

    import logo from '../assets/img/image1';
    <img src={logo} ></img>

es5方法

   <img src={require('../assets/img/image1')}></img>

远程图片方法

   <img src="https//www.baidu.com"></img>

循环数据必须加key

  render() {
    var listResult = this.state.list.map(function(value,key){
        return <li key={key}>{value}</li>
    })
    return(
        <div> 
          <ul>  
            {listResult}
          </ul>
          <ul>
             {/*模板遍历*/}
             {
               this.state.list.map(function(value,key){
                           return <li key={key}>{value}</li> 
               })
             }
          </ul>
        </div>
          
    )
  }

re act事件 方法

  construtor(){
   super();
   this.state={name:'world'}
    // 获取数据--第二种改变this指向的方法
   this.getMessage =  this.getMessage.bind(this)
  }
  // 获取数据--第三种改变this指向的方法
  getName=()=>{
    alert(this.state.name)
  }
  setData=()=>{
    // 改变state的值
    this.setState({name:'hello'})
  }
  setName=(str)=>{
    // 改变state的值
    this.setState({name:str})
  }
  <button onClick={this.run}>执行方法</button>
  <button onClick={this.getData.bind(this)}>获取数据--第一种改变this指向的方法</button>
  <button onClick={this.getMessage}>获取数据--第二种改变this指向的方法</button>
  <button onClick={this.getName}>获取数据--第三种改变this指向的方法</button>
  <button onClick={this.setData}>改变state里的值</button>
  <button onClick={this.setName.bind(this,'hello')}>执行方法传值</button>

事件 对象

事件对象、键盘事件、表单事件、ref 获取DOM节点、React实现类似Vue的双向数据绑定

事件对象：在触发DOM上的某个事件时，会产生一个事件对象event。这个对象包含着所有与事件有关的信息

获取表单的值

1.监听表单的改变事件； onChange
2.在改变的事件里面获取表单输入的值；事件对象
3.把表单输入的值赋给state.username; this.setState({})
4.点击按钮的时候获取 state里的username this.state.username

   run=(event)=>{
     alert(event.target)  // 获取执行事件的DOM节点
     event.target.style.background="red"   // 改变button颜色
     // 获取DOM的属性
     alert(event.target.getAttribute('aid'))  // 123
   }
   inputChange=(e)=>{
    console.log(e.target.value)
    this.setState({username:e.target.value})
   }
   getInput=()=>{
     alert(this.state.username)
   }
    render(){
      return(
        <div>
          // 事件对象
          <button onClick={this.run} aid='123'>事件对象</button>
          // 表单事件
          // 获取表单的值  1.监听表单的改变事件；2.在改变的事件里面获取表单输入的值；
          // 3.把表单输入的值赋给state.username;4.点击按钮的时候获取state里的username
          <input onChange={this.inputChange}/> 
          <button onClick={this.getInput} >获取input值</button>
        </div>
      )
    }

ref获取DOM节点

获取表单的值
- 1.监听表单的改变事件； onChange
- 2.在改变的事件里面获取表单输入的值； ref获取
- 3.把表单输入的值赋给state.username; this.setState({})
- 4.点击按钮的时候获取state里的username this.state.use rname
获取DOM节点
- 1.给元素定义 ref属性
- 2.通过this.refs.use rname 获取DOM节点

      inputChange=()=>{
        // 获取DOM节点
       // 1.给元素定义ref属性
       // 2.通过this.refs.username  获取DOM节点
        let val = this.refs.username.value;
        this.setState({username:val})
      }
      getInput=()=>{
        alert(this.state.username)
      }
       render(){
         return(
           <div>
             
             {/*表单事件*/}
             {/* 获取表单的值  1.监听表单的改变事件；2.在改变的事件里面获取表单输入的值；*/}
             {/* 3.把表单输入的值赋给state.username;4.点击按钮的时候获取state里的username*/}
             <input onChange={this.inputChange} ref="username"/> 
             <button onClick={this.getInput} >获取input值</button>
           </div>
         )
       }

键盘事件

 inputKeyUp=(e)=>{
   if(e.keyCode==13){  // 说明按enter
     alert('123')
   }
 }
  render(){
       return(
         <div>
           {/*键盘事件*/}
          <input onKeyUp={this.inputKeyUp}/>
         </div>
       )
  }

React实现类似Vue的双向数据绑定
*

        inputChange=(e)=>{
          this.setState({
            username: e.target.value
          })
        }
         render(){
              return(
                <div>
                  {/*双向数据绑定  model改变view view改变反过来影响view*/}
                 <input value={this.state.username} onChange={this.inputChange}/>
                </div>
              )
         }

react表单
- 非约束性组件和约束性组件
  - 非约束性组件：, 这个 defaultValue其实就是原生DOM中的value属性。这样写出来的组件，其value值就是用户输入的内容，React完全不管输入的过程。
  - 约束性组件：。这里，value属性不再是一个写死的值，他是this.state.username是由this.handleChange负责管理的。这时候实际上input的value根本不是用户输入的内容，而是onChange事件触发之后，由于 this.setState导致了一次重新渲染。
```
  inputChange=(e)=>{
    this.setState({
      username: e.target.value
    })
  }
   render() {
        return(
          <div>
            {/* MVVM*/}
           <input value={this.state.username} onChange={this.inputChange}/>
           <input />
           </div>
        )
   }
              
```