react学习---生命周期、refs、插入HTML、style属性
写react组件的时候,我们写的都是jsx文件,那jsx到页面渲染成功这个过程发生了什么呢?
首先通过react和babel编译将jsx转化为javascript对象,react-dom
负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素,并且渲染到页面上。
生命周期
挂载阶段的 生命周期:
- componentWillMount 组件挂载开始之前,也就是render之前调用这个生命周期钩子
- componentDidMount 组件挂载完成以后,也就是 DOM 元素已经插入页面后调用。
- componentWillUnmount 组件对应的 DOM 元素从页面中删除之前调用。
更新阶段的生命周期:
更新阶段也就是通过setState改变数据,导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程。这是一个组件更新的过程
- shouldComponentUpdate(nextProps, nextState) 通过这个方法控制组件是否重新渲染。如果返回
false
组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用 - componentWillReceiveProps(nextProps) 组件从父组件接收到新的props之前调用
- componentWillUpdate 组件开始重新渲染之前调用
- componentDidUpdate 组件重新渲染并且把更改变更到真实的 DOM 以后调用
ref和react中的DOM操作
虽然在react中,数据驱动,避免了大多数的DOM操作,但有时候我们不的不操作DOM操作,react中只要加入ref属性,就可操作DOM
class AutoFocusInput extends Component { componentDidMount () { this.input.focus() // 通过this.input即可获取到这个input元素 } render () { return ( <input ref={(input) => this.input = input} /> ) } } ReactDOM.render( <AutoFocusInput />, document.getElementById('root') )
dangerouslySetHTML 属性用于给元素插入HTML元素
class Editor extends Component { constructor() { super() this.state = { content: '<h1>React.js 小书</h1>' } } render () { return ( <div className='editor-wrapper' dangerouslySetInnerHTML={{__html: this.state.content}} /> // 插入html ) } }
style属性:
在html中,通常我们这么写:<h2 style="font-size: 12px; color: #ccc;">hello world!</h2>
在react中,要插入行内样式,需要CSS 属性变成一个对象再传给元素:
<h2 style={{fontSize: 12px; color: #ccc;}}>hello world!</h2>
style
接受一个对象,这个对象里面是这个元素的 CSS 属性键值对,原来 CSS 属性中带 -
的元素都必须要去掉 -
换成驼峰命名,如 font-size
换成 fontSize
,text-align
换成 textAlign