React 初体验
2013年5月推出.
vue官方维护,React社区维护.
三个特点: 声明式,组件化,一次学习,随处编程.
React环境搭建
1) 建立一个项目的目录,在目录中 npm init -y
会在目录中产生一个文件package.json
2) npm i react --save (或yarn add react)
会在目录中有一个node_modules目录,
找到react目录,
找到这个目录下的umd目录,拷贝umd目录下react.development.js
到自己的js目录下
3) npm i react-dom --save(或 yarn add react-dom)
在node_modules目录下找到react-dom目录,在这个目录下找到umd目录,
在react-dom/umd目录下找到react-dom.development.js文件拷贝到
自己的js目录下
4) npm i babel-standalone --save(或yarn add babel-standalone)
在node_modules目录下找到babel-standalone目录
拷贝这个目录下的babel.js 到js目录下
5) 引入顺序
a)react.development.js
b)react-dom.development.js
c) babel.js
三个文件引入顺序不可混乱 否则不能编程 .
Reac编写在 script标签内 需要设置标签类型,否则会无法解析
如:
6.react框架内, 标签引入变量 需要写在{} 内;
7.Class在react语法中 为关键字 需要改成className
所有渲染页面的内容 需要卸载render函数内
8.react 语法更加支持原生js
如解构一个数组: function showList(arr) {
return <ul> {arr.map((item, index) =>
<li key={index}>{item}</li>
)}
</ul>
}
- jsx
是一种语法糖
jsx是javascript扩展的意思
相当于 js+xml
jsx 不是必须的,但是用jsx可以提高开发效率
jsx的原理就是 React.createElement(tag,{attrs},content) - react 差值表达式是一个{ }
11)jsx 注意事项
a.对象不能直接渲染,数组以字符串的形式进行渲染
b. jsx中 class 改为className
c. 事件的首字母要大写 onXxx 形式
脚手架环境搭建
npx create-react-app myproject 启动react项目安装 备注 项目名称不能有大写
项目搭建成功后的文件目录
所有文件写入在src目录
静态资源目录是public
Src目录中 App.js 文件作为项目入口文件
负责从其他文件进行引入.
引入语法为 import xxx from “文件路径”
引入后渲染在
function App() {
return (
<List2/>
</div>
);
}
export default App;
标签 是一个组件标签 来自另一个文件的引入
React内的组件数据定义在
constructor(props){
super(props)
this.state={
node:aaa
}
}
其组件内要忽的node的值
1.this.state.node
2.let {node} = this.state.node //结构赋值 然后直接 {node} 调用
以上是在当前组件内拿值,
如果是父组件传来的值
this.props.xxx
父组件传值过来则是
定义一个节点
<input id=“name” type=“text” ref={(currentNode) => this.chaxun = currentNode} />
获取节点的值
console.log(this.state.node.current.value)
console.log( console.log)
数据的更新,state是初次拿到的数据,当其中数据发生改变的时候,页面并不会重新渲染,需要在
this.setState({
})
这里面重新改变数据,页面的渲染才会发生改变.
React生命周期详解
React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁
初始化
1、getDefaultProps()
设置默认的props,也可以用dufaultProps设置组件的默认属性.
2、getInitialState()
在使用es6的class语法时是没有这个钩子函数的,可以直接在constructor中定义this.state。此时可以访问this.props
3、componentWillMount()
组件初始化时只调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。
4、 render()
react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。
5、componentDidMount()
组件渲染之后调用,只调用一次。
更新
6、componentWillReceiveProps(nextProps)
组件初始化时不调用,组件接受新的props时调用。
7、shouldComponentUpdate(nextProps, nextState)
react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候
8、componentWillUpdata(nextProps, nextState)
组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state
9、render()
组件渲染
10、componentDidUpdate()
组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。
卸载
11、componentWillUnmount()
组件将要卸载时调用,一些事件监听和定时器需要在此时清除。