Day01—初识React
一、初识React
React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”
二、安装React 调试工具 React devTools
Github: https://github.com/facebook/react-devtools
# 1.克隆项目
git clone https://github.com/facebook/react-devtools.git
# 2,进入 react-devtools
cd react-devtools
# 3.切换分支(v3)
git checkout v3
# 4.npm/yarn 安装依赖
npm --registry https://registry.npm.taobao.org install
------------------------------------------------------
yarn install
# 5.npm/yarn 打包扩展程序
npm run build:extension:chrome
------------------------------
yarn build:extension
一顿命令敲完后
打开Chrome 拓展程序—开发模式,点击加载已解压的拓展程序,找到目录为react-devtools/shells/chrome/build/unpacked 文件夹,自动导入。
参考链接 :史上最简单 Chrome (谷歌浏览器) 安装 React Developer Tools 扩展工具包
突然发现上面的react devTools是旧版的,如果下载新的版本,请看React 官网
点击 Chrome ,就可以跳转到Chrome插件市场,添加React Developer Tools 4.0版本以上的
三、React中JSX语法规则
1. JSX
在React中使用JSX语法来创建虚拟DOM
2. JSX语法规则
四、React 创建组件
- 函数式组件
- 类式组件
1、函数式组件
2、类式组件
构造函数 constructor
-
构造函数
constructor()
只调用一次,并且构造函数constructor()
可以省略不写 -
在 React 中,构造函数
constructor()
仅用于以下两种情况:- 一、通过给 this.state 赋值对象来初始化内部 state。
- 二、为事件处理函数绑定实例
-
当不接收props 时,
constructor
中的this.props
为undefined
# 错误写法
constructor () {
super()
console.log('constructor:', this.props) // 输出 undefined
}
如果要在constructor
中通过访问 this.props
,必须接收 props
并且传递给 super(props)
class Person extends React.Component{
# 正确写法
constructor (props){
// 构造器只调用一次,并且构造器可以省略不写,给state初始化时才写
super(props)
console.log(this.props)
}
// 对标签属性进行类型、必要性的限制
static propTypes = {
person:{
name: PropTypes.string.isRequired,
age: PropTypes.number,
sex: PropTypes.string
}
}
// 指定默认标签属性值
static defaultProps = {
person:{
sex:'男',
age:18
},
interest:'舞蹈、音乐、写作'
}
render () {
console.log(this);
const {name,sex,age} = this.props.person
const interest = this.props.interest
return(
<ul>
<li>姓名: {name}</li>
<li>性别: {sex}</li>
<li>年龄: {age}</li>
<li>兴趣: {interest}</li>
</ul>
)
}
}
let hh = {
name:'花花',
age:20,
sex:'女'
}
ReactDOM.render(<Person person={hh}/>,document.getElementById('test') )