快速了解react

最新推荐文章于 2024-02-23 09:57:05 发布

大转转FE

最新推荐文章于 2024-02-23 09:57:05 发布

阅读量267

点赞数

概况：

通过本篇文章你可以对react的重点有个整体的认识。关于react是什么，优点，解决什么问题等，网上一大推就不啰嗦了。

了解虚拟DOM的实现，参考这篇文章

[虚拟DOM]
(https://www.zhihu.com/question/29504639)

简单讲，其实就是用一个轻量级的dom结构(用js模拟实现)，来模拟重量级的dom结构，通过比对轻量级结构后，在操作重量级dom结构提高性能，从而到达性能优化的目的。

生命周期：

快速学习react 先了解它的重中之重----生命周期，一个组件在不同时期会调用不同时期的函数接口也就是对应的生命周期函数

装载时期的函数

getDefaultProps（是设置默认props）getInitialState(废弃，设置默认State) 依次执行以下函数

• constructor

• componentWillMount

• render

• componentDidMount

更新时期的函数

如果组件的数据有变化了（porp,state），依次执行以下函数

• componentWillReceiveProps

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate

卸载时期的函数

销毁组件 •componentWillUnmount

import React,{ Component } from 'react';
class Demo extends Component {
constructor(props) {
// 构造函数，要创造一个组件类的实例，会调用对应的构造函数，
//一个react组件需要构造函数，往往为了两个目的.
//1：初始化state.2.绑定成员函数this环境。
// 无状态的函数就不需要构造函数，
super(props)
console.log("---初始化组件---")
this.state = {
test:'想要显示一段不一样的文字'
//定义state，存放页面的数据，通过this.setState()方法修改
//.this.setState()函数所做的事情，首先是改变this.state的值，然后驱动组件经历更新过程，这样才有机会让this.state里新的值出现在界面上。
}
}
componentWillMount () {
console.log("---组件挂载前---最先执行的函数")
}
componentDidMount () {
console.log("---组件挂载后---")
}
componentWillReceiveProps (nextProps) {
console.log("---父组件重新渲染---")
值得注意的是，更新时期的componentWillReceiveProps函数，
只要父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的Props有没有改变，都会触发子组件的componentWillReceiveProps函数，但是自身的this.setState方法触发的更新过程不会调用这个函数。
}
shouldComponentUpdate (nextProps,nextState) {
console.log("---组件接受到重绘状态---")
它决定了一个组件什么时候不渲染。
在更新过程中shouldComponemtUpdata 返回 false那就立刻停止更新。
this.setState函数后会执行shouldComponemtUpdata 然后在决定我要不要更新。
相反 shouldComponemtUpdata 函数返回 TRUE，接下来就会依次调用
componentWillUpdata,render,componetDidUpdata函数，它把render像夹心面包似得夹在了中间。
}
componentWillUpdate (nextProps,nextState) {
console.log("---组件将要更新---")
}
componentDidUpdate (prevProps,prevState) {
console.log("---组件更新完毕---")
}
render () {
console.log("---组件渲染---")
return (
<div>{this.state.test}</div>
)
}
componentWillUnmount () {
console.log("---组件销毁---")
}
}
export default Demo;

componentWillMount 和componentDidMount的区别：componentWillMount 可以在服务器调用，也可以在浏览器调用但是componentDidMount只能在浏览器被调用，因为装载是一个组件放到DOM树上的过程，那么真正的装载是不可能在服务器上完成的，服务器的渲染并不会产生DOM树。所以我们可以利用这一点。在componentDidMount被调用时候，组件已经被装载到DOM树上了，可放心的去操作渲染出来的任何DOM。

编写组件：

组件间的传递通过props进行传递，看下面例子

import React from 'react';
// 一级父组件
class Level1 extends React.Component{
render(){
return <Level2 color='red'/>
}
}
// 二级子组件
class Level2 extends React.Component{
render(){
return <Level3 color={this.props.color}/>
}
}
// 三级孙子组件
class Level3 extends React.Component{
render(){
return <div color={{color: this.props.color}}/>
}
}

也可以这样创建

import React from 'react';
const Level1 = React.createClass({
render() {
return (
<div></div>
);
}
});
export default Level1 ;

React.createClass和extends Component的区别：

Component{}是ES6的写法，会自动继承Component里面的属性 createClass({})是React的ES5写法，会生成一个React Component 语法区别

• propType 和 getDefaultProps

• 状态的区别

• this区别

• Mixins

参考这篇文章

[React.createClass和extends Component的区别]
(https://segmentfault.com/a/1190000005863630)

如果你的组件是无状态的，纯输出组件也可以直接写成函数如下

function Pure(props){
return(
<div>{props.xxxx}</div>
)
}

react 组件必须一级一级传递，如果想要越级传递，1直接到5，那么需要用到redux

redux

redux之前最好了解下flux，但是redux更加优秀。 react和redux事实上是两个独立的东西，如果你两者单独使用推荐react-redux库，我们从redux 使用方法开始，循序渐进过渡到react-redux，这个库可以让我们简化代码的书写

在redux框架下，一个react组件是这样运行的

读取Store的状态，用于初始化组件的状态，同时监听Store的状态改变，当Store状态发生改变时候，就需要更新组件的状态，从而驱动渲染。当需要更新store状态时，就要派发action对象。根据当前props,和state，渲染用户界面。

项目结构

actions--->用户行为 components--->组件 containers--->容器 reducer--->一个纯函数返回新的state状态 store--> store里面负责分发action行为 index.html ---> 模板文件 webpack---> 打包配置文件

actions:

• 是一个行为的抽象

• 是普通JS对象

• 一般由方法生成

• 必须有一个type 我要添加一本书这个行为可以如下：

const addTodo = (text) =>{
retrun {
type:'Add',
id: nextTodoId++,
text,
}
}

reducer：

• 是响应的抽象

• 是纯方法

• 传入旧的状态和action

• 返回新的状态

签名函数：reducer(state, action) state 是当前状态，action是接受到的action, 注意不能改变参数state和action

const todo = (state, action) =>{
switch (action.type){
case "Add_Book":
return
{
text: action.text,
}
}

用一个例子串起来：

设计一个具有加减功能的项目：

Actions.js：

export const increment = (counterCaption) => {
return {
type: increment,
counterCaption: counterCaption
};
};
export const decrement = (counterCaption) => {
return {
type: decrement,
counterCaption,//es6写法等同于counterCaption: counterCaption
};
};

Reducer.js：

export default (state, action) => {
const {counterCaption} = action;//等同于const counterCaption= action.counterCaption;
switch (action.type) {
case increment:
return {...state, [counterCaption]: state[counterCaption] + 1};
case decrement:
return {...state, [counterCaption]: state[counterCaption] - 1};
default:
return state
}
}
//return {...state, [counterCaption]: state[counterCaption] - 1};等同于
//const newState = Object.assign({},state);
//newState[counterCaption]--;
//return newState;