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' }
- 需要写super();
- 继承有两种写法
- 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){ // 说明按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)
