react 小白常用方法总结

最新推荐文章于 2025-07-03 15:58:36 发布

原创最新推荐文章于 2025-07-03 15:58:36 发布 · 575 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小白 #react

本文围绕React展开，介绍了React元素是组件构成部分，讲解了将元素渲染到根节点的方法。阐述了创建组件的不同写法，包括不推荐的react写法和推荐的es6写法。还提及组件的挂载和卸载，以及React中DOM特性和属性的命名规则、与Html属性行为的差异，最后介绍了常用生命周期钩子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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()：组件接受新的参数时调用