「这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」
React学习记录
使用react的两种方式
-
- 引入.js文件使用React
-
- 使用脚手架工具编码 （初学者是使用官方提供的脚手架即可 Create-react-app）
创建react项目
-
安装脚手架 npm install -g create-react-app
-
创建react项目 create-react-app my-project
结构说明
-
Yarn.lock项目依赖的安装包、版本号
-
Readme 项目说明（可自定义说明
-
Pakage.json 代表脚手架工具实际上是一个node包文件项目的介绍
可以通过 npm run start启动项目（脚手架自动生成的
-
.gitignore不想上传到git上的文件
-
node_modules 项目依赖的第三方包
-
public
Favicon.ico 网页图标
Index.html 项目首页的模板
-
src
Index.js 整个程序运行的入口
App.js 组件
import Fragment from 'react';
// 等价于
// var Fragment = React.Fragment;
export default TodoList;
ReactDOM.render(<App />, document.getElementById('root'));
把组件挂载到名为‘root’的节点下
jsx语法，若使用了jsx语法，一定要引入React
import React from 'react';
jsx语法
what： 在js文件中写
有且仅有一个包含一个元素
构造函数Constructor优于其他函数执行
this.handleInputChange.bind(*this*)
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
- 1.注释
{/* */}
{
//
}
-
- 不被转义
dangerouslySetInnerHTML={{__html: item}}
- 3.点击lable，鼠标光标聚集到输入框
<label htmlFor='insertArea'>输入内容</label>
<input id='insertArea' className='input'/>
- 4.className 定义标签类名
React总结
1.声明式开发
2.可以与其他框架并存
3.组件化
4.单向数据流（子组件不能直接修改父组件的数据）
5.视图层框架（借助其他框架便于组件之间传值）
6.函数式编程（实现前端自动化测试）
1.Chrome 调试工具：
React Developer Tools
2.PropTypes属性接收强校验
引入’prop-types’
import PropTypes from 'prop-types'
TodoItem.propTypes = {
test: PropTypes.string.isRequired,
content: PropTypes.string,
handleItemDelete: PropTypes.func,
index: PropTypes.number
}
3.defaultProps 默认值
当组件的state props发生改变的时候，，render函数就会重新执行
页面是由render函数渲染出来的
4.虚拟DOM（回头重新了解）
一个JS对象
JSX -> JS对象 -> 真实的DOM
return <div *onClick*={*this*.handleClick}>{test} - {content}</div>
// 等价于
return React.createElement('dic', {}, 'item')
// 多层
return React.createElement('div', {}, React.createElement('span', {}, 'hh'))
优点：
-
- 性能提升
-
- 跨端应用得以实现 react native
5.Diff算法
多个setState结合为一个setState，两个虚拟DOM比对
同层比对，从上至下，不要用index作key值
6.Ref的使用（不推荐使用）
<input *id*='insertArea' *className*='input'
*value*={*this*.state.inputValue}
*onChange*={*this*.handleInputChange}
*ref*={(input) => {*this*.input = input}}
/>
