如何去掉最外层的div不包裹 Fragment 碎片化
import React,{Component,Fragment } from 'react'
return (
<Fragment>
<p></p>
</Fragment>
)
事件的绑定
<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
修改state的值
inputChange(e){
this.setState({
inputValue:e.target.value
})
}
react的循环
Key值的绑定不要只是一个index 尽量的是唯一值
<ul>
{
this.state.list.map((item,index)=>{
return <li key={index+item}>{item}</li>
})
}
</ul>
修改this的指向
<button onClick={this.addList.bind(this)}> 增加服务 </button>
增加值
addList(){
this.setState({
list:[...this.state.list,this.state.inputValue]
})
}
删除数组值
页面return 需要()包起来
<ul>
{
this.state.list.map((item,index)=>{
return (
<li
key={index+item}
onClick={this.deleteItem.bind(this,index)}
>
{item}
</li>
)
})
}
</ul>
必须先声明 不允许直接操作 this.state
//删除单项服务
deleteItem(index){
let list = this.state.list
list.splice(index,1)
this.setState({
list:list
})
}
JSX的代码注释
{/* 正确注释的写法 */}
{
//正确注释的写法
}
如何解析html标签
用这种容易被XSS攻击
dangerouslySetInnerHTML={{__html:item}}
laber中使用for
<label htmlFor="aa">加入服务:</label>
<input id="aa" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
VScode插件
Simple React Snippets
父组件传值给子组件——props
父组件:
<XiaojiejieItem content={item} />
子组件:
return (
<div>{this.props.content}</div>
);
子组件向父组件传递数据
子组件:
<div onClick={this.handleClick}>{this.props.content}</div>
handleClick(){
this.props.deleteItem(this.props.index)
}
父组件:
<ul>
{
this.state.list.map((item,index)=>{
return (
<XiaojiejieItem
key={index+item}
content={item}
index={index}
//关键代码-------------------start
deleteItem={this.deleteItem.bind(this)}
//关键代码-------------------end
/>
)
})
}
</ul>
绑定this——constructor(bind)推荐
constructor(props){
super(props)
this.handleClick=this.handleClick.bind(this)
}
单项数据流
不允许数据传递后直接修改
解决方案 传递给一个方法 使其可以修改
React谷歌调试工具
React developer tools
React效验传递的值
import PropTypes from 'prop-types'
独立在class外的
XiaojiejieItem.propTypes={
content:PropTypes.string,
deleteItem:PropTypes.func,
index:PropTypes.number
}
必须传递的值——isRequired
name:PropTypes.string.isRequired
默认值的传递——defaultProps
XiaojiejieItem.defaultProps = {
name:'aa'
}
ref
ref={(input)=>{this.input=input}}
inputChange(){
this.setState({
inputValue:this.input.value
})
}
由于setState是异步的 执行需要时间 打印在cb中
addList(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
},()=>{
console.log(this.ul.querySelectorAll('div').length)
})
}
React的生命周期
Initialization:初始化阶段。
Mounting: 挂在阶段。
Updation: 更新阶段。
Unmounting: 销毁阶段
Mounting阶段叫挂载阶段,伴随着整个虚拟DOM的生成,它里边有三个小的生命周期函数,分别是:
componentWillMount : 在组件即将被挂载到页面的时刻执行。
componentWillMount(){
console.log('componentWillMount----组件将要挂载到页面的时刻')
}
render : 页面state或props发生变化时执行。
render(){
console.log('render---组件挂载中.......')
}
componentDidMount : 组件挂载完成时被执行。
componentDidMount(){
console.log('componentDidMount----组件挂载完成的时刻执行')
}
优化:
在didMount里面请求数据
componentDidMount(){
axios.post
}
shouldComponentUpdate——函数会在组件更新之前,自动被执行
常常被用来优化组件的性能
shouldComponentUpdate(){
console.log('shouldComponentUpdate---组件发生改变前执行')
}
优化:
shouldComponentUpdate(nextProps,nextState){
if(nextProps.content !== this.props.content){
return true
}else{
return false
}
}
componentWillUpdate——在组件更新之前
componentWillUpdate(){
console.log('componentWillUpdate---组件更新前')
}
componentDidUpdate——组件更新之后执行
componentDidUpdate(){
console.log('componentDidUpdate----组件更新之后执行')
}
componentWillUnmount——组件从页面中删除的时候执行
componentWillUnmount(){
console.log('child - componentWillUnmount')
}
react-transition-group——动画库
安装:
npm install react-transition-group --save
引入:
CSSTransition
import { CSSTransition } from 'react-transition-group'
调用
<CSSTransition
in={this.state.isShow} //用于判断是否出现的状态
timeout={2000} //动画持续时间
classNames="boss-text" //className值,防止重复
>
</CSSTransition>
classNames-enter: 进入(入场)前的CSS样式;
classNames-enter-active:进入动画直到完成时之前的CSS样式;
classNames-enter-done:进入完成时的CSS样式;
classNames-exit:退出(出场)前的CSS样式;
classNames-exit-active:退出动画知道完成时之前的的CSS样式。
classNames-exit-done:退出完成时的CSS样式。
.boss-text-enter{
opacity: 0;
}
.boss-text-enter-active{
opacity: 1;
transition: opacity 2000ms;
}
.boss-text-enter-done{
opacity: 1;
}
.boss-text-exit{
opacity: 1;
}
.boss-text-exit-active{
opacity: 0;
transition: opacity 2000ms;
}
.boss-text-exit-done{
opacity: 0;
}
unmountOnExit属性
元素退场时,自动把DOM也删除
多DOM的动画
引入:
import {CSSTransition , TransitionGroup} from 'react-transition-group'
调用
<TransitionGroup>
{
this.state.list.map((item,index)=>{
return (
<CSSTransition
timeout={1000}
classNames='boss-text'
unmountOnExit
appear={true}
key={index+item}
>
<XiaojiejieItem
content={item}
index={index}
deleteItem={this.deleteItem.bind(this)}
/>
</CSSTransition>
)
})
}
</TransitionGroup>
在用CSSTransition包裹最外层
<CSSTransition
timeout={1000}
classNames='boss-text'
unmountOnExit
appear={true}
key={index+item}
>
<XiaojiejieItem
content={item}
index={index}
deleteItem={this.deleteItem.bind(this)}
/>
</CSSTransition>