React 初体验

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>

    }

9. jsx
   是一种语法糖
   jsx是javascript扩展的意思
   相当于 js+xml
   jsx 不是必须的，但是用jsx可以提高开发效率
   jsx的原理就是 React.createElement(tag,{attrs},content)
10. 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()
组件将要卸载时调用，一些事件监听和定时器需要在此时清除。