react基础
基础语法
-
引入文件
- <script src="../base/react.min.js"></script>
相当于vue.js 提供的是React对象
-
<script src="../base/react-dom.min.js"></script>
提供了ReactDOM 对象
-
网页 B(browser)/S(server) webapp dom bom
react基本语法 + react-dom 可以写网页
-
app C(client)/s(Server) 手机硬件以及ui
react基本语法 +react-native 可以写app
-
<script src="../base/browser.min.js"></script>
- 帮助浏览器解析jsx语法糖
-
创建组件
组件是虚拟dom
-
组件名开头必须大写
let Component = React.createClass({ render() { // render 函数内部 返回jsx 其中()不是必须的只是表示这里的是jsx return ( <h1> 你好世界</h1> ) } })
-
挂载组件
- 将虚拟dom通过 ReactDOM.render(组件标签，要挂载的元素)
ReactDOM.render(<Component/>,document.getElementById('app'))
jsx 语法糖
- javascript xhtml 严格模式下的html
- 必须只有一个根元素
- 标签必须闭合
数据承载
vue 中一个组件的数据2中 一种 组件内部的data 一种是来自组件外部的props
-
react数据承载也有两个
- state
- state 类似于vue中的data 组件自己的数据 可以随便的修改
- getInitailState 生命周期初始化
- props
- 和vue一样来自组件外.只读
- 用getDefaultProps 进行初始化
- state
-
外部传递和组件内部初始化同时存在以外部传递优先
let Hehe = React.createClass({ //根据挂载的数据不同这里决定用getInitialState或getDefaultProps getInitialState(){ console.log('初始state的生命周期') return { name:'韩梅梅' } }
数据绑定
- react 数据绑定{变量或者表达式} 和vue中的 {{ }} 一样一样的
- jsx 不能直接绑定对象
- jsx 绑定数组 会将数组的每一项拆分出来 渲染到页面上
- boolean null undefined 不会再页面上直接渲染 但是可以使用3元表达式
- 其他的基本类型该怎么渲染就怎么渲染
列表渲染
- react中的条件渲染依赖于 绑定数组会将数组的每一项拆分出来
- 利用map遍历出数组每一项
let Component = React.createClass({
getInitialState(){
return{
list:['咒怨','午夜凶铃','红色高跟鞋','死亡来电','阴阳瞳']
}
},
render() {
return (
<ul>
{this.state.list.map((item,index)=>{
return(
<li>{item}</li>
)
})}
</ul>
)
}
})
ReactDOM.render(<Component/>,document.getElementById('app'))
-
也可封装出一个函数.
renderList(){ // 函数的返回结果 return this.state.list.map((item,index)=>{ // map 每一项的返回 return( <li>{item}</li> ) }) }, render() { return ( <ul> {this.renderList()} </ul> ) }
条件渲染
通过三元表达式控制渲染不渲染
表达式1||表达式2 运算符
-
函数实现
-
中心思想就是在数据中给一个状态,通过状态的改变来控制是否渲染
let Component = React.createClass({ getInitialState(){ return{ show:false } }, renderDiv(){ let result = null if(this.state.show){ result = (<div id = 'test'></div>) } return result }, render() { console.log(this) // 解构赋值 取出数据 let {show} = this.state return ( <div> {/*{show?"显示":'隐藏'}*/} {/*{show?<div id='test'></div>:''}*/} {/*{!show||<div id='test'></div>}*/} {this.renderDiv()} </div> ) } })
-
属性绑定
-
属性绑定
希望属性的值是变量
<img src={变量或者表达式}>
注意类名要用className
事件绑定
-
react事件和原生事件类似只需要把事件名写成小驼峰就ok
原生 <div onclick=''></div>
react <div onClick=''></div>
-
onClick={(e)=>{
事件处理代码
}}
-
不带参数 默认参数是事件对象 千万别加()
onClick={this.fun//函数}
-
带参数 通过bind实现 默认参数会放到最后方
onClick={this.fun.bind(null,4,6)}
响应式
- 通过setState触发页面的修改
- this.setState({要修改的数据:修改的内容},回调)
- setState 是一个异步方法
- 参数1是要修改的数据
- 参数2是修改成功之后的回调
组件嵌套
- 组件的嵌套关系随意 谁在外部谁是爸爸
插槽
<组件>内部内容</组件>
使用组件内部的内容默认不会被渲染
-
可以使用this.props.children预留一块空间来渲染可能要用到的内容
let Component = React.createClass({ render(){ return( <div className='test1'> 这是组件1 <Son> //这里默认不会被渲染.但可以在组件内容预留下一块空间来渲染 政治老师:底层基础，·决定高层建筑 </Son> </div> ) } }) //创建组件二 let Son = React.createClass({ render(){ console.log(this) return ( <div className='test2'> //预留一块空间来渲染可能添加的内容 <h1>{this.props.children}</h1> </div> ) } })
ref
-
可以绑定dom 也可以绑定组件
通过组件对象下的 refs进行获取
let Son = React.createClass({ render(){ return ( <div className='test2'> 这里是组件二 <h1 ref='hehe'>体育老师：受伤了就别逞强了</h1> <button onClick={()=>{ console.log(this.refs.hehe) }}>点击</button> </div> ) } })
-
绑定之后可以获取到绑定组件的一切方法 可以实现在父组件中调用子组件的方法
let Component = React.createClass({ render(){ return( <div className='test1'> 这是组件1 <button onClick={()=>{ console.log(this) this.refs.son.sayHello() }}>点击</button> <hr/> //绑定子组件 <Son ref='son'></Son> </div> ) } })
组件通信
需要修改的数据和修改数据的方法要放到一起.
-
父子通信 props refs
子父通信 props
亲兄弟通信 状态提升
远亲通信 全局状态管理 redux
let Father = React.createClass({ getInitialState(){ return{ hair:'五颜六色 长发披肩' } }, render(){ return( <div className='father'> <h3>这里是父组件</h3> <button onClick={()=>{ this.setState({hair:'小平头'}) }}>改过自新回头是岸</button> <hr/> {/*父组件通过自定义属性 将自己的数据传奇给子组件*/} <Son hair={this.state.hair}></Son> </div> ) } }) let Son = React.createClass({ render(){ return( <div className='son'> <h3>子组件</h3> //子组件通过props属性来接受 头发:{this.props.hair} </div> ) } })
-
ref
let Father = React.createClass({ render(){ return( <div className='father'> <h3>这里是父组件</h3> <button onClick={()=>{ // 父组件通过refs强行调用子组件的理发方法 this.refs.son.change() }}>强制措施</button> <Son ref='son'></Son> </div> ) } }) let Son = React.createClass({ getInitialState(){ return{ hair:'五颜六色 长发披肩' } }, //数据和处理数据的方法都在这里,同个ref把子组件的数据和方法都传给父组件.让父组件来调用. change(){ this.setState({hair:'小平头'}) }, render(){ return( <div className='son'> <h3>子组件</h3> {this.state.hair} </div> ) } }) -
子父通信
let Father = React.createClass({ getInitialState(){ return{ name:"韩梅梅" } }, changeName(name){ this.setState({name:name}) }, render(){ return( <div className='father'> <h3>这里是父组件</h3> {this.state.name} <hr/> {/*通过props 传递方法*/} <Son fafun={this.changeName}></Son> </div> ) } }) let Son = React.createClass({ render(){ return( <div className='son'> <h3>子组件</h3> <button onClick={()=>{ console.log(this) // 调用父组件的方法 this.props.fafun('李雷雷') }}>子组件的触发按钮</button> </div> ) } })
