React学习笔记

最新推荐文章于 2023-09-09 15:33:40 发布

牛爷爷lxl

最新推荐文章于 2023-09-09 15:33:40 发布

阅读量359

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/liuxilei66/article/details/79330192

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React:

React基础知识、

React：用于构建用户界面的 JavaScript 库
特点：

声明式：React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。（以声明式编写UI，可以让你的代码更加可靠，且方便调试。）
组件化：创建好拥有各自状态的组件，再由组件构成更加复杂的界面。（无需再用模版代码，通过使用JavaScript编写的组件你可以更好地传递数据，将应用状态和DOM拆分开来。）

React组件基础、

一：初步配置React开发环境

npm项目初始化：npm init(创建一个初始化的package.json)
项目依赖包安装: react、react-dom、babelify、babel-preset-react、babel-preset-es2015 （babel-core、babel-loader、webpack、webpack-dev-server）
eg：npm react –save 保存到生产依赖环境
npm react –save –dev 保存到开发依赖环境

webpack 热加载配置

全局安装webpack webpack-dev-server
项目内安装webpack webpack-dev-server
实现打包 webpack –watch 监控

项目热加载

浏览器：localhost:8080/webpack-dev-server/index.html

二：虚拟DOM概念

如何理解虚拟DOM?

组件

组件的return 函数里返回的HTML节点必须是一个
可以给外部使用的组件定义：export default class ComponentHeader extends React.Component{}
入口的定义： ReactDOM.render(,document.getElementById(”));

三：React多组件嵌套

组件也可以通过参数的形式传递
组件的return函数里返回的HTML节点必须是一个
注意项目命名的规范与文件的结构化
补充：代码中的’./’ 表示当前目录下;.gitignore文件名写错以至于将相关包上传，以后注意！

四：JSX内置表达式

{window.username == ” ? ‘默认用户名’ : ‘用户名:’ + username}
input中disable={} 单引号去掉
{/注释/}
HTML要显示可以进行Unicode转码。 eg:
HTML要显示还可以通过
注意此方法可能会存在XSS攻击
补充：.gitignore内容写错node_module，应该是node_modules注意注意！加s

五：生命周期

生命周期中的函数类似于钩子：钩子实际上是一个处理消息的程序段，通过系统调用，把它挂入系统。每当特定的消息发出，在没有到达目的窗口前，钩子程序就先捕获该消息，亦即钩子函数先得到控制权。这时钩子函数即可以加工处理（改变）该消息，也可以不作处理而继续传递该消息，还可以强制结束消息的传递。

component instantiated （组件初始化） getDefaultProps (获取默认属性） getInitialState (获取初始化state) componenntWillMount (组件将要加载的函数）componentDidMount (组件加载完毕的函数) propschanged （属性的更改） componentWillUpdate (将要update) componentDidUpdate (update完成) componentdeleted （组件删除） componentWillUnmount （组件卸载的函数）
补充:出现的问题引入的包 ‘react’、’react-dom’注意小写，创建组件 extends React.Component 写对，
未解决问题：React Developer Tools会自动检测React组件，不过在webpack-dev-server模式下，webpack会自动将React组件放入到iframe下，导致React组件检测失败，变通方法是webpack-dev-server配置在–inline模式下即可，但是未成功，解决方法：在webpack-dev-server配置中没有inline:true去开启inline模式，因为webpack-dev-server模块无法访问webpack的配置。因此，用户必须添加webpack-dev-server的客户端入口文件到webpack的配置中，webpack-dev-server简单使用

React属性与事件、

一：State 属性

state对于模块属于自身属性
初始化：this.state = {username:”Parry”};
初始化可以放置在构造函数constructor里
修改state:this.setState({username:’liuxilei’});
state的作用域只属于当前的类，不污染其他模块
补充：状态值会立即（自动）反映在虚拟dom上然后显示在dom上;ReactDOM.render(,document.getElementById(”));这里没有引号，state改变可以实时反应在页面上，不刷新

二：Props属性

props 对于模块属于外来属性
传递参数：<BodyIndex username='liuxilei'/>
模块中接收参数：this.props.username

三：事件与数据的双向绑定

事件的绑定：注意es6的语法

可以在构造函数里绑定this:this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
.或者调用时绑定：onClick = {this.changeUserInfo.bind(this,50)}

子页面向父页面传递参数的方法

在子页面中通过调用父页面传递过来的事件props进行组件间的参数传递
好好理解这里的onChange事件，为什么不用onBlur
补充：this的指向：类的方法内部如果含有this，它将默认指向类的实例。MDN

四：可复用组件，真正让React开发快速、高效的地方

Prop验证

https://doc.react-china.org/docs/typechecking-with-proptypes.html
注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。！！！！

默认Prop值

const defaultProps = {text:’Hello world’};
使用方法：BodyIndex.defaultProps = defaultProps;

传递所有参数的快捷方式

<Component{...this.props} more={'values'}/>

五：组件的Refs

操作DOM的两种方法

原始获取方法：var myDiv = document.getElementById('myDiv');React.findDOMNode(myDiv).style.color = 'red';
（推荐使用）方法二的定义：<input ref='myInput' />
方法二的获取：this.refs.myInput
Refs是访问到组件内部DOM节点唯一可靠的方法
Refs会自动销毁对子组件的引用
不要在render或render之前对Refs进行调用
不要滥用Refs