react小记
react的jsx语法跟JavaScript不兼容,凡是使用JSX的地方,
script
标签中都要加上type="text/babel"
所有组件类必须有自己的
render
方法,用于输出组件, 组件类的第一个字母必须大写,组件类只能包含一个顶层标签添加组件属性注意将
class
写成className
,for
属性写成htmlFor
,因为class
和for
是JavaScript
的保留字可以给组件标签加上属性,在组件内部通过
this.props
对象获取this.props.children
属性表示组件的所有子节点,可以用React.Children.map
来遍历子节点propTypes
使用:(1)安装库:
npm install --save prop-types
(2)引入: `import PropTypes from ‘prop-types’
(3)在类中使用:
class YourClass extends Component {
static propTypes ={
name: PropTypes.object // name是你使用的类中的一个属性
}
}
ref
获取真正的DOM节点,因为组件并不是真实的DOM节点,而是存在与内存之中的一种数据结构,叫做虚拟DOM,组件渲染中可以有ref
属性,在回调事件中用this.refs.[refName]
可以返回这个真实的DOM节点,但是这个属性必须等到寻觅DOM插入文档以后才能使用,否则会报错用
getInitialState
方法可以定义初始状态getInitalState () {
return {XXX: false}
}
使用
this.state
读取初始状态,this.setState
方法修改状态值this.props
表示那些一旦定义,就不再改变的特性;this.state
是会随着用户互动而产生变化的特性。表单中的内容不能用
this.props
获取,input textarea select radio
等元素的值不能通过this.props.value
读取,而是定义一个onChange
事件的回调函数,通过event.target.value
读取用户输入的值组件的生命周期:
will
函数在进入状态之前调用,did
函数在进入状态之后调用componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
组件的
style
属性设置方式不能写成style=”color: {this.state.color}”
而要写成:
style={{color: this.state.color}}
其中,第一层大括号表示这是JavaScript语法,第二重大括号表示样式对象
网络请求: 使用
componentDidMount
方法设置api请求,等到请求成功,使用this.setState
方法重新渲染UI