React 是由 Facebook 发明及维护,当前最流行的框架,生态链完善
使用 script 来引入 有关 React 的 js 文件
主要进入的文件是 react.development.js // react 的文件依赖
react-dom.development.js // react 的 dom 操作依赖
babel.min.js // react 采用了 jsx 的写法,所以要依赖此文件
如果觉得在 React 的官网上不好找 js 文件的话,我们可以通过 https://www.bootcdn.cn/ 来进行查找,并且可以通过网址搜索 js 的内容,将其拷贝走;
案例:
当我们成功的将 React 的 js 文件引入进入后,我们就可以开发 React 的项目了
第一步,一个简单的 demo ,体验简单的 React 的渲染页面
这上面说了 React 中,最基本的将内容渲染到页面的方法
但是我们还是有一些注意事项:
1. script 的类型,不再是 javascript ,而是 text/babel ,因为 jsx 和 js 格式有冲突,所以我们的 js 类型 只能是 text/babel
2. 注意 React 中的 大小写问题,有可能会将字母的大小写问题,导致出现问题
3. 组件名的首字母大写,这并不是我们的默认这么做,而是 React 的硬性要求
4. render 函数,中的 return 只能由一个顶层标签,不能出现多个顶层标签,在一个顶层标签里面可以随意的嵌套
5. js 的注释在 jsx 中没有用,且可能会报错
6. 在 jsx 中 html 该怎么写,怎么写,js 代码写在 {} 中
让我们来看下一个案例(因为 html 的部分,都是一样的,只是 js 的部分不一样,所以,下面所有的案例都会只写 js 的部分)
这个案例,就是将 <App></App> 组件里面的内容,如果渲染到页面上来
注意事项:
我们并不能直接使用 this.props.children 来进行遍历,如果我们使用 this.props.children 来遍历节点,会出一下几个问题
1. 如果 <App></App> 里面没有内容,this.props.chidren 的值是 undefined
2. 如果 <App></App> 里面有一个内容,this.props.chidren 的值是 object
3. 如果 <App></App> 里面有多个内容,this.props.chidren 的值是 array
所以,React 专门提供了遍历 this.props.children 的方法:React.Children(),这样我们便不用担心遍历后会有问题了
下面这个案例 PropTypes 的使用
我们需要下载的插件 prop-types.js ,还是通过 https://www.bootcdn.cn/ 的网址来进行
这个是我们引入的文件内容
head 中写入的内容
js 部分
像 PropTypes 常用于正则验证,或者默认添加的属性
ref 的案例
注意事项:
this.ref 是真实的节点,所以需要等到虚拟 dom 添加到文档中才可以获取,还有注意 this 问题,所以我们的函数采用 es6 的语法
但表单是一个特别的案例:
表单的东西不能通过 this.props 查看,因为表单跟组件一种互动,不能获取,而是定义一个 onChange 的事件回调,来获取表单的值
有关生命周期的案例
React 的生命周期分三个状态分别是:mount update unmount
常见的钩子函数:componentDidMount() // 组件加载到页面后,执行此钩子函数
componentDidUpdate() //组件更新完成后(修改数据后),执行此函数
ajax 的案例(因为放不下,所以截图截了两次),需下载 axios.js 的插件
head:
js:
这样的话,我们的基本操作,就做完了