react 小白 常用方法总结
react 小白 常用方法总结
1. react元素只是组件的构成部分之一。是在屏幕上看到的内容。
const element = <h1>Hello, world</h1>;
---------------------------------------------------------------------------------------------------------------------------------------------------------
2. 一般只定义一个根节点<div id="root"></div>，
将元素渲染到根节点上
ReactDOM.render(element,document.getElementById('root'));（script标签引入）
npm和es6 用 import ReactDOM from 'react-dom'
npm和es5 用 var ReactDOM = require('react-dom')
----------------------------------------------------------------------------------------------------------------------------------------------------------
3. 创建组件：
react写法：不推荐
import React form ‘react’；
const Contacts = React.createClass({
render(){
return(<div></div>)
}
})；
export default Contacts;
----------------------------------------------------------------------------------------------------------------------------------------------------------
es6写法：推荐
import React form ‘react’；
class Contacts extends React.Component {
constructor(props){
super（props）关键字，它指代父类的实例（即父类的this对象
子类没有自己的this对象，而是继承父类的this对象.
只有一个理由需要传递props作为super()的参数，
那就是你需要在构造函数内使用this.props
}
render( ){
return(<div></div>)
}
}
export default Contacts;
---------------------------------------------------------------------------------------------------------------------------------------------------
4. 组件中的挂载和卸载：
class Contacts extends React.Component {
constructor(props){
super（props）关键字，它指代父类的实例（即父类的this对象
子类没有自己的this对象，而是继承父类的this对象.
只有一个理由需要传递props作为super()的参数，
那就是你需要在构造函数内使用this.props
this.state = {date: new Date()};
}
挂载componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
卸载 componentWillUnmount() {
clearInterval(this.timerID);
}
定时器tick() {
this.setState({
date: new Date()
});
}
render( ){
return(<div></div>)
}
}
ReactDOM.render(
<Contacts />,
document.getElementById('root')
);
--------------------------------------------------------------------------------------------------------------------------------------------------------
5. 在React中，所有的DOM特性和属性（包括事件处理函数）
都应该是小驼峰命名法命名
HTML中的属性tabindex
React的属性是 tabIndex
aria-*和data-*属性是例外aria-label
-------------------------------------------------------------------------------------------------------------------------------------------------------
6. React和Html之间有许多属性的行为不同:
checked属性，checkbox或radio的<input>组件的支持，对于构建受控组件有用
defaultChecked这是非受控组件的属性，设定对应组件首次装载时是否选中状态
className属性指定一个CSS类，
适用于所有的常规DOM节点和SVG元素，比如<div>，<a>和其它的元素。
htmlFor
因为for是在javascript中的一个保留字，React元素使用 htmlFor代替。
selected
selected属性被<option>组件支持。使用该属性设定受控组件是否被选择。
value
value属性受到<input> 和 <textarea> 组件的支持。可以用它设置受控组件的值。
defaultValue属性对应的是非受控组件的属性，用来设置组件第一次装载时的值。
所有受支持的HTML属性
<div tabIndex="-1" />
<div className="Button" />
<input readOnly={true} />
css样式：
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}一般不推荐
<div style={{ height: 10 }}>自动添加单位
Hello World!
</div>
--------------------------------------------------------------------------------------------------------------------------------------------------------
7.常用生命周期钩子
componentWillMount()：组件加载前调用 ## componentDidMount()：组件加载后调用
componentWillUpdate(): 组件更新前调用 ## componentDidUpdate(): 组件更新后调用
componentWillUnmount()：组件卸载前调用
componentWillReceiveProps()：组件接受新的参数时调用
————————————————
版权声明：本文为CSDN博主「qitianxiu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qitiaxiu/article/details/90410250
