React 学习记录📝

2022 年 7 月 24 日
本文字数：1579 字
阅读完需：约 5 分钟

安装 React 运行环境

前期环境： Node.js Git
React 创建环境： npm install --g reate-react-app 全局安装

创建项目

create-react-app 项目名 #React 语法

React 工作原理

React 视图更新是通过重复渲染来实现动态更新数据的。它不是完全渲染整个 DOM 树结构，而是借助于 Virtual Dom 来进行原有 DOM 树结构数据和更新后的 DOM 树结构进行比对，如果有出现不同结构，只会更新不同的这一部分 Dom，而不会整体渲染 Dom 树，提高了渲染效率。

React 数据

props : 组件之间通信使用, 只能传递，不能修改 props8
state ：组件内部数据使用

porps

父组件与子组件通信，通过在子组件上动态绑定属性和值
子组件通过this.props 来接收父组件传递过来的数据

// 父组件import React, { Component } from 'react';// 引入子组件import Son from './Son'
class Hello extends Component {    constructor(props) {        super(props);        this.state = {             inputValue:'',            list:['测试','测试2','测试2']         }         this.addCount = this.addCount.bind(this)         this.onListenValue = this.onListenValue.bind(this)    }        render() {         return (             <div className='main'>                # 动态绑定属性和值                            <Son                            deleteItem={this.deleteItem}                            lists={this.state.list}                        ></Son>                                                                                                        </div>         );    }} export default Hello;






// 子组件import React, { Component } from 'react';
class Son extends Component {    constructor(props) {        super(props);    }      render() {         return (             <div>                <ul>                {                    // 通过 this.props 来接收使用                    this.props.lists.map( (item,index) => {                            return (                                <li                                key={index}                                 >                        {item}                    </li>                         )                    })                }                </ul>            </div>
         );    }} export default Son;

复制代码

`props` 接口校验类型

父组件在给子组件传递 prop 时，子组件可以约定父组件对应 prop 要传递什么类型。
必须在子组件中引入import PropTypes from 'prop-types'
propTypes 只是一个用来辅助验证 prop 类型的，在开发阶段还可以使用，如果放到线上环境的话会占用代码空间和消耗 CPU。最好在线上的话通过babel-react-optimize 来自动消除 propTypes

<Son    info="测试"                          lists={this.state.list}> </Son>

//在子组件中 通过类.propTypes 来验证Son.propTypes = {    lists: PropTypes.string.isRequired,    info: PropTypes.number}
TodoItem.propTypes = {    test: PropTypes.arrayOf(PropTypes.string, PropTypes.number)   //可以设置多个类型　　 test: PropTypes.oneOfType([PropTypes.string, PropTypes.number])   //符合任意一个类型即可}

复制代码

`state`

state 是组件内部状态管理，
获取state : this.state.属性
修改state: this.setState = {
属性： newValue
}
注意
1.state 必须是一个对象
改变自身数据只能通过改变state，而不能使用 prop

小结

prop 用来定义外部接口， state 记录内部状态
组件不能修改 prop 的值，是通过state 来修改

发布于: 1 小时前阅读数: 8

原文链接:【http://xie.infoq.cn/article/e4c797b34eca6770affbca159】。文章转载请联系作者。

程序员海军

关注

还未添加个人签名 2020.04.02 加入

🏅目前从事物流，铁路相关的前端全栈开发工作. 🏆2021年InfoQ写作平台-签约作者 🏆 🏆微信公众号：【前端自学社区】

发布

暂无评论

创作场景

React 学习记录📝

安装 React 运行环境

创建项目

React 工作原理

React 数据

porps

props 接口校验类型

state

注意

小结

程序员海军

评论

`props` 接口校验类型

`state`