1.脚手架安装
npm install -g create-react-app
mkdir ReactDemo //创建ReactDemo文件夹
create-react-app demo01//用脚手架创建React项目
cd demo01 //等创建完成后，进入项目目录
npm start //预览项目，如果能正常打开，说明项目创建成功
2. 入口文件编写
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(
<App />,
document.getElementById('root')
)
3.<Fragment>标签
省去顶部的div标签
import React,{Component,Fragment } from 'react'
class App extends Component{
render(){
return (
<Fragment>
<div><input /> <button>增加</button></div>
</Fragment>
)
}
}
export default App
4. 数据绑定写法以及this指向
constructor(props) {
super(props)
this.state = {
inputValue: '呵呵',
list: [
'添加服务1',
'添加服务2',
]
//this.inputChange= this.inputChange.bind(this)/推荐写法
}
}
<input
value={this.state.inputValue}
onChange={this.inputChange.bind(this)
//onChange={this.inputChange} //推荐写法 constructor中声明
/>
inputChange(e){
this.setState({
inputValue:e.target.value
})
}
注释1 需要绑定this指向 2.React中改变值需要使用this.setState方法。
推荐写法this指向在constructor中声明
5.数据更新 map循环 以及刷新
constructor(props){
super(props) //调用父类的构造函数，固定写法
this.state={
inputValue:'1' , // input中的值
list:['1','2']
}
}
{
this.state.list.map((item,index)=>{
return <li key = {index+item}>{item}</li>
})
}
this.setState({
list:[...this.state.list,this.state.inputValue]
})
... 这个是ES6扩展运算符
//删除单项服务
deleteItem(index){
let list = this.state.list
list.splice(index,1)
this.setState({
list:list
})
}
禁止直接操作state的数据后期的性能优化上会有很多麻烦,比如：
this.state.list.splice(index,1) X
6.父子组件传值
1.父传子
this.state.list.map((item, index) => {
return (
<GirlsItem
content={item}
index={index}
key={index + item}
/>
)
})
子组件直接使用this.props获取
{this.props.content}
{this.props.index}
注释：直接在标签上设置属性把参数传递下去
2.子传父
父组件
<GirlsItem
index={index}
key={index + item}
delItem={this.del.bind(this)}
/>
父组件方法
del(index) {
console.log(index);
}
子组件直接使用this.props获取参数方式向上传递
this.props.delItem(this.props.index)
注释：直接在标签上设置属性把参数传递下去
7.组件传值校验
import PropTypes from 'prop-types'
GirlsItem.PropTypes = {
content: PropTypes.string.isRequired,
delItem: PropTypes.func,
index: PropTypes.number,
}
注释：
isRequired ：必传参数设置
PropTypes.string ：字符串类型
GirlsItem.defaultProps = {
name: 默认参数
}
注释：默认参数
8.ref获取dom数据
例子1：<ul ref={(ul) => { this.ulList = ul }}></ul>
console.log(this.ulList.querySelectorAll('li').length)
注释：ulList就是ul 的dom数据
例子2 ： <input ref={(val) => { this.inputs = val }} ></input>
console.log(this.inputs)
注释：inputs就是input vaue的数据
9. 数据改变异步刷新的回调
this.setState({
list: li
}, () => {
console.log(‘页面刷新完的异步回调操作’)
})
