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}>绑定数据</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){  // 说明按enteralert('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>)}
```