react
1.空脚手架
github地址：
下载后安装react:
cnpm i
cnpm i react react-dom -S
2.新建index.html,在body标签中写一个id为root的div
<body>
<div id="root"></div>
</body>
3.在入口文件此处为index.js
import React from 'react' // 每一个react组件必须的，绑定react-dom必须的
import ReactDOM from 'react-dom' // 从react模块剥离出来的，用来渲染dom节点
import App from './App' // react组件
ReactDOM.render( // 渲染DOM
<App />, // 组件
document.getElementById('root') // 渲染到哪里
)
4.创建一个组件
后缀名可为.jsx , .js …
babel-loader:既可以解析js也可以jsx
class类组件：
class Com extends React.Component {
render () {
return (
<div>
这就是最简单的react的class组件
</div>
)
}
}
export default Com
/**
* 类 Com 继承了 react 的 组件 Component
* 继承了父类的 render 函数 ----- 用来渲染 组件的 结构的
* 返回一段HTML代码结构，类似于vue template
* 返回的这种语法 叫做 react中的 jsx 语法 javascript xml
* 返回时 只有 一个 顶级标签
*/
函数式组件：js中的函数
所有组件都可以使用类组件
如果组件需要状态，现阶段必须使用类组件
如果组件没有装填，可以使用函数式组件
function Com1 () {
return (
<div>
这里是 function 函数式组件
</div>
)
}
const Com2 = function () {
return (
<div>
这里也是 function 函数式组件
</div>
)
}
const Com3 = () => {
return (
<div>
这里是 箭头函数 的函数式组件
</div>
)
}
const Com4 = () => (
<div>这里是简介的 箭头函数的 函数式组件</div>
)
export default Com1...2 3
5.react组件中的状态 ---- 初始化的数据
import React from 'react'
class Com extends React.Component {
constructor (props) {
super(props)
/**
* 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，
*必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，
加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
*/
this.state = {
msg: 'hello world'
}
}
render () { //调用父类的render方法
return (
<div>
<h1>类组件之 状态</h1>
{ this.state.msg } //访问变量用大括号
</div>
)
}
}
export default Com
6.react循环遍历
边循环边渲染
class Com extends React.Component{
constructor(props){
super(props)
this.state={
list:[1,2,3,4,5]
}
}
render () {
return (
<div>
{ //通过js代码返回html代码
this.state.list.map((item,index)=>{
return(
<p key="index">{item}</p> //唯一的键，不加控制台报错
)
})
}
</div>
)
}
}
先循环再渲染
render () {
let arr=[]
this.state.list.map((item)=>{
arr.push(
<p key="item.id">{item.title}
<ul>
{
item.data.map((ite,ind)=>{
return (
<li key={ind}>{ite}</li>
)
})
}
</ul>
</p>
)
})
return (
<div>
{
arr
}
</div>
)
}
}
7.react事件处理
import React , {Component} from 'react'
export default class extends Component{
constructor(props){
super(props)
}
getdata(){
console.log(this) //undefined
console.log("bbbbbbb")
}
render(){
return (
<span onClick={this.getdata}>aaaaa</span>
)
}
}
在事件处理函数中打印this为undefined，解决方法：
1,将自定义方法加入到类的实例中
constructor(props){
super(props)
this.getdata=this.getdata.bind(this) //强行改变this指向
}
2.bind改变this指向
render () {
return (
<div>
<h1> react - 事件处理</h1>
<button onClick = { this.clickHandler.bind(this) }>点击事件</button>
</div>
)
}
3.箭头函数改变this（事件源）
render () {
return (
<div>
<h1> react - 事件处理</h1>
<button onClick = { (e)=>{this.clickHandler(e)} }>点击事件</button>
</div>
)
}
4.箭头函数改变this，在箭头函数中写事件处理函数
render () {
return (
<div>
<h1> react - 事件处理</h1>
<button onClick = { () => {
console.log(this)
console.log('0')
} }>点击事件</button>
</div>
)
}
8.react事件参数及修改状态
export default class extends Component {
constructor (props) {
super(props)
this.state = {
msg: 'hello world'
}
}
clickHandler (str) {
console.log(str)
this.setState({ // 改变初始化的数据
msg: str
})
}
render () {
return (
<div>
<button onClick = { this.clickHandler.bind(this, '这里是参数') }>点击事件-带参数</button>
{ this.state.msg }
</div>
)
}
}
9.react请求数据并渲染
事件请求数据
render () {
return (
<div>
<h1> react - 事件处理 - 数据请求</h1>
<button onClick = { () => {
axios.get('https://www.daxunxun.com/douban').then(res => {
this.setState({
prolist: res.data
})
})
} }>点击事件</button>
<ul>
{
this.state.prolist.map(item => (
<li key = { item.id }> { item.title } </li>
))
}
</ul>
</div>
)
}
生命周期钩子函数请求
componentDidMount () {
axios.get('https://www.daxunxun.com/douban').then(res => {
this.setState({
prolist: res.data
})
})
}
10.生命周期钩子函数
挂载：
constructor初始化数据，添加组件的自定义方法
static getDerivedStateFromProps() – 一般不需要使用
render 类组件必须要有的
componentDidMount可以请求数据、可以设置定时器以及延时器，可以进行DOM操作
更新：
static getDerivedStateFromProps
shouldComponentUpdate()
componentWillUpdate(即将过时)
render
getSnapshotBeforeUpdate()
componentDidUpdate()操作dom
卸载：
componentWillUnmount() – 销毁，记录某些信息
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
