React官方文档阅读笔记--核心概念

最新推荐文章于 2021-07-30 16:57:06 发布

不会骑扫把的小女巫

最新推荐文章于 2021-07-30 16:57:06 发布

阅读量306

点赞数

分类专栏： react 面试文章标签： react

本文链接：https://blog.csdn.net/qq_22836769/article/details/110874145

版权

本文介绍了React的核心概念，包括JSX的安全性，元素渲染的单根DOM节点原则，组件与props的使用，以及组件状态（state）和生命周期的详细过程。在组件生命周期中，讲解了从挂载阶段的constructor、getDerivedStateFromProps、render到componentDidMount，再到更新阶段的shouldComponentUpdate等关键方法的作用和调用顺序。

摘要由CSDN通过智能技术生成

1. JSX

jsx 可以防止注入攻击
- React DOM 在渲染所有输入内容的时候，默认会进行转译，可以有效的防止 XSS (cross-site-scriping) 跨站脚本攻击
Babel会把JSX转译成一个名为React.createElement()函数调用

2. 元素渲染

在项目的index.html 文件中，会有一个div

    <div id="root"></div>

仅用React 构建的应用通常只有单一的根DOM节点

3. 组件 & props

当 React 元素为用户自定义组件时，它会将jSX 所接受的属性以及子组件Children转换为单个对象 props 传递给组件。
自定义组件必须以大写字母开头
- 以小写字母开头的元素代表一个 HTML 内置组件, 会生成相应的字符串 'div' 或 'span' 传递给 React.createElement作为参数.
- 大写字母开头的元素,如 <Foo /> 则会编译为 React.createElement(Foo)
组件绝不能修改自身的props
纯函数：不会修改本函数的参数（入参），所以多次调用相同的入参始终返回相同的结果

4. state & 生命周期

React.Component

React的Class组件需要继承 React.Component。

强烈建议不要创建自己的组件基类，代码重用的主要方式是组合，不是继承

组件的生命周期

把现有的所有生命周期函数全部列出来，看看执行结果先

	constructor(props) {
   
        super(props)
        this.state = {
   
            count: 0,
            name: '大笨钟'
        };
        console.log('constructor');
    }

    static getDerivedStateFromProps<