React 实战总结

Z时代
2024-01-10
分类：综合

react

前言：
React中有两个最重要的地方
第一个是ReactDOM.render方法
第二个是React.Component类

ReactDOM.render 方法使用介绍
ReactDOM.render 是 React 的最基本方法用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
ReactDOM.render(template,targetDOM) 方法接收两个参数：
第一个是创建的模板，多个 dom 元素外层需使用一个标签进行包裹。
第二个参数是插入该模板的目标位置。

React.Component 类使用介绍
React.Component 的子类中有个必须定义的 render() 函数

React.Component 挂载
当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：
    constructor()
    static props()
    render()
    componentDidMount()

React.Component 卸载
当组件从 DOM 中移除时会调用如下方法：
    componentWillUnmount

React.Component 更新
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：
    componentDidUpdate()

React.Component 错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：
    componentDidCatch()

react环境搭建
第一步：下载react相关的框架库
第二步：react代码放在text/babel标签内
第三步：React.Component 创建组件，ReactDOM.render 渲染元素

创建组件的方式
方式1：元素渲染
const Element1 = <h1>Hello, world!</h1>;

方式2：函数返回元素
const Element2 = (props) => {
    return (
        <h1>Hello, world!</h1>
    );
}
function Element2(props) {
    return (<h1>Hello World!</h1>);
}
方式3：React.Component类返回元素
class Element3 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
      }
    render() {
        return (<h1>Hello, world!</h1>);
    }
}

样式：设置内联样式
var Style = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style={Style}>Hello, world!</h1>,
    document.getElementById('example')
);

数组：JSX 允许在模板中插入数组，数组会自动展开所有成员
var arr = [
<h1>Hello</h1>,
<h2>world!</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);

以上是 React 实战总结的全部内容，来源链接： utcz.com/z/381178.html

React 实战总结

其他人也看了：