React笔记

React

目录结构 入口文件

React是 React 的核心库

ReactDom是提供与 DOM 相关的功能

RegisterServiceWorker加快react的运行速度的一个js文件

ReactDom.render() 渲染页面

React创建组件

• render里边放的模板 是HTML和JavaScript的结合 jsx

创建子组件

• App.js 根组件
• 文件名首字母大写 类名首字母大写
• 引入组件
  • import Home from ‘./components/Home’
• render单个div可以不写();如果多个，需要用括号，并且需要一个大的div（根节点）包含起来
• 构造函数 constructor
  • 需要写super();
    • super关键字，代表父类中的实例，即父类的this对象 是必须写的
    • 如果需要父子组件传值 需要写成super(props)

    子类需在constructor方法中调用super方法，否则新建实例时会报错，这是因为子类没有自己的this对象，而是继承父类的this对象

      constructor(props){
         super(props);
      }
    

  • 可以定义数据

       this.state = {
           name: 'zhangsan'
       }
    

• 继承有两种写法
  • class Home extends Component{} 引入{ Component }
  • class Home extends React.Component{}

绑定数据 绑定对象 绑定属性 {this.state.name}

• 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>
            
      )
    }
  

react事件方法

•   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.username
  • 获取DOM节点
    • 1.给元素定义ref属性
    • 2.通过this.refs.username 获取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>
          )
     }
                
  

用到this 要注意this指向 function(){}.bind(this)

代码007普通

打赏 收藏 海报 链接