2018-07-14 21:02:19 cp_Mark 阅读数 476
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

最近入坑React-Native,买了些参考书,撸了一个玩Android的react-native版本,对于参考书里面关于flux和redux是一脸的懵逼,后面在豆瓣上搜了redux相关的书籍,发现一本不错的入坑书深入浅出React和Redux,里面讲解了原生prop和state在使用过程中的缺点,以及如何一步步演化到redux框架,这里作一下总结。涉及到的知识点:
1. 什么是prop和state
2. 传统prop和state在使用过程中的不足
3. flux
4. redux

prop和state

我们需要先从React组件的数据prop和state开始介绍,这两者无论哪一个发生变化,都可能引起组件的重新渲染,那么它们有什么区别的?prop是组件的对外接口,state是组件的内部状态,对外用prop,内部用state。简单的理解就是React的首要思想是通过组件来开发应用,state负责管理组件内部的状态,prop负责接收外部传递过来的数据(包含函数等)。

我们以如下的一个简单自定义组件为例:

自定义封装Component
左侧为文本,右侧为两个按钮,分别实现+、-功能,我们现在通过+、-来修改计数值,左侧文本同步更新,此时我们通过按钮修改计数值,这个组件维护的计数值就属于组件内部管理的状态,即state。那么prop在哪里呢?上面说了prop是组件的对外接口,简单的理解就是外部组件可以通过它向组件内部传递数据(包含回调函数),我们这里就以计数组件的初始值为例,我们允许外部组件通过prop向组件内部传递初始值。

因为我本身是做Android的,所以我的理解就是state相当于一个对象内部的变量,表示着当前对象内部的状态,而prop相当于一个构造,可以通过构造为对象传递初始数据等。

传统prop和state在使用过程中的不足

还是以上面的组件为例,不过现在不是一个,而是有多个,我们现在要统计多个计数组件的总计数。UI大致如下:
多个计数组件

场景是这样的,现在下面的总计数需要统计上面三个计数,这就涉及到子组件向父组件传递数据,同时父组件要维护一个状态,这里就涉及到一个问题数据重复,数据重复的话就会出现一个问题:如果重复的数据不一致,那么要以谁为准?

这就是传统prop和state的不足,既然出现了问题,那么肯定就会有人想着去解决,这就是下面要介绍的flux。

Flux

针对上面提到的数据管理方面存在的缺陷,Facebook开源了一个框架Flux,它的思想就是单向数据流。在说单向数据流之前,我们先说一下MVC,在我们的想象当中(理想化)的MVC应该如下图:
理想MVC

因为MVC框架并没有一种阻止Model和View进行直接通信的机制,所以在实际的工作中出于一种方便的想法,经常会出现Mode和View直接通信,所以往往是这样的:
实际的MVC

可以发现在Model和View中出现了直接的通信,这就导致模块之间耦合增强,在后期维护中往往出现牵一发而动全身的状况(一改就是bug,完全的懵逼)。出于这种实际的状况,Facebook提出了单向数据流的概念:
Flux的单向数据流
对比这张图和上面的MVC框架图,我们很明显的可以发现有以下几个区别:
(1)Flux易于扩展,新增功能只需要添加新的Action类型即可,不用修改原来的代码逻辑
(2)整个数据都是在单一方向上流转,不存在不同的角色间互相通信(单向数据流)

在继续分析Flux之前,我们先弄清楚一下上面架构图中各角色的作用:
(1)Dispatcher:派发Action,全局唯一
(2)Action:一个普通的JavaScipt对象,代表一个动作的纯数据。Action对象必须有一个type字段,代表这个Action对象的类型,建议使用字符串类型
(3)Store:存储应用状态,同时接受Dispatcher派发的动作,根据动作来决定是否要更新应用状态。当Store的状态发生变化时,View也要作出相应的变化。注意所有的Store对象都需要注册到Dispatcher中
(4)View:UI库。

  • View如果要改变Store的状态,必须而且只能通过派发Action来实现
  • 创建View时,要读取Store上的状态来初始化组件的内部状态(即数据来源不再是prop,而是Store)
  • 当Store上状态发生变化时,组件要立刻同步内部状态

根据上面的角色介绍,我们发现Flux有以下的优缺点:

优点:
(1)数据统一管理。原生的React组件,每个组件都要维护驱动自己渲染的状态数据,特别是在多个组件之间的状态有关联时,一锅粥的节奏;通过Flux来获取,每个组件的状态都统一由相应的Store来处理,组件只负责渲染界面,就不存在数据重复的问题了
(2)单向数据流。只能通过派发Action来改变State
缺点:
(1)Store之间可能存在依赖、耦合关系
(2)Store混杂了逻辑和状态,为热加载添加了难度(比如需要根据用户属性来动态加载不同的模块,现在由于Store混杂了逻辑和状态,那么我们就很难在保存状态的情况下,直接替换逻辑)

由于Flux存在这样的缺点,Redux应运而生。

Redux

Redux在Flux单向数据流的技术上,强调了三个基本原则:
(1)唯一数据源。应用的状态数据应该只存储在唯一的一个Store上,这个Store是一个树形的对象,每个组件往往只是对应树形对象上的一部分数据
(2)保持状态只读。这一点和Flux一样,即只能通过派发Action对象来修改Store的状态
(3)数据改变只能通过纯函数。就是说函数的返回结果必须完全由参数来决定,而不产生任何副作用,也不能修改参数

Redux单向数据流架构

结合上图,我们来了解一下Redux的优化点:

  • 由于唯一数据源(Store唯一,一种树形对象,每个组件的状态只是树形对象中的一小部分),所以不用我们自己来实现Dispatcher,因为Dispatcher的作用就是用来分发Store的,现在既然Store只有一个,就不用我们来实现Dispatcher了,由框架内部实现,要分发唯一Store时,直接调用其dispatch方法即可。

  • 数据改变只能通过纯函数,这里所说的纯函数就是Reducer。Reducer是计算机科学中的通用概念,以JavaScript为例,数组类型就有reduce函数,接收的参数就是reducer,reduce做的事情就是把数组中所有元素依次做“规约”,即对每个元素都调用一次参数reducer函数

第一点还是比较好理解的,至于第二点可能会觉得有点懵逼,我们这里再说明一下reducer函数吧。在Redux中,每个reducer的函数签名如下:

reducer(state,action)

第一个参数state是当前的状态,第二个参数action是接收到的action对象,reducer要做的事情就是根据state和action的值产生一个新的对象返回。下面是一个简单的reducer函数实现:

//此处state为当前状态,action为接收到的Action对象
function reducer(state,action) => {
    //从Action中结构出参数paramX
    const {paramX} = action;
    //...为扩展操作符,此处表示把state中所有字段扩展开,可以理解为把state对象的所有参数都取出赋值给这个新的对象,
    //,后面的[paramX]:函数,表示为这个新对象中的paramX状态赋新值
    return {...state,[paramX]:(state[paramX]) => {
        //可以针对状态中的对应的值做处理,然后返回新值给paramX
        doSomething...
        return xxx
    }};
}

简单来说这个reducer的作用就是更新state状态。

好了,redux已经在一定程度上解决了Flux框架所遗留的一些不足,不过Redux本身又出现了新的问题:那就是虽然Store是全局唯一,但是我在需要的地方需要去重复导入,就算不重复导入,由父组件导入然后传递给子组件,可是我父组件又用不到,这样也不是很合理。所以一个应用中,最好只有一个地方需要直接导入Store(应用入口),基于这个需求,我们需要来了解一下React的Context功能。React的Context(上下文环境)的作用如下:
Context原理图
这个图还是比较容易理解的,根组件提供一个Context,子组件在需要的时候直接就能去读取这个Context,而不用通过父组件一层层的传递过来,这样就解决了上面说的问题。

我们发现这些都是由现成套路的,我们想要自己实现也可以,如果不想,那么就是用react-redux吧。

由于本人也是刚刚入坑不就,如有不足之处还请指出!!!O(∩_∩)O

2018-07-04 16:54:33 qq_20802379 阅读数 59
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

说明

JSX是 JavaScrip 的一种扩展语法,可以生成 React “元素”,它的样子类似:

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

从本质上讲,JSX 只是为 React.createElement(component, props, …children) 函数提供的语法糖。如上面的代码等价于:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

语法

使用JSX有一些限制:
1.必须引用React库(import React from ‘react’或者在<script>加载React)
2.可以使用“.”引用React组件,如下的MyComponents.DatePicker:

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Imagine a {props.color} datepicker here.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;
}

3.用户定义组件必须以大写字母开头

当一个元素类型以小写字母开头,编译器会认为它是类似<div>或者<span>的内置组件,而不是自定义组件

4.不能使用表达式作为 React 元素类型,如下例为错误写法:

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 错误!JSX 类型不能是表达式
  return <components[props.storyType] story={props.story} />;
}

但是你可以使用大写字母开头的变量在运行时为组件选择类型

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 正确!JSX 类型可以是一个以大写字母开头的变量.
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

5.props相关(在下面详细描述)
6.children相关(在下面详细描述)

props

JSX支持传入属性(props),如下:

<MyComponent foo={5} />

传入属性的方式有:
1.传递任何一个用 {} 包裹的 JavaScript 表达式作为 props,如:

<MyComponent foo={1 + 2 + 3 + 4} />

2.传入一个字符串字面量作为一个 props(支持未转义的 HTML),如:

<MyComponent message="hello world" />
<MyComponent message="&lt;3" />

3.如果你没给 prop(属性) 传值,那么他默认为true(不建议使用默认值):

<MyTextBox autocomplete />
//等价于
<MyTextBox autocomplete={true} />

4.props支持扩展操作符:

function App() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

children

在 JSX 表达式中可以包含开放标签和闭合标签,标签中的内容会被传递一个特殊的 props(属性):props.children,如:

<MyComponent>Hello world!</MyComponent>

上例中,props.children即为“Hello world!”。

传递props.children的方式有:
1.支持字符串字面量,即直接传入字符串。支持转义字符。不过注意,JSX会删除每行开头和结尾的空格,并且也会删除空行,邻接标签的空行也会被移除,字符串之间的空格会被压缩成一个空格
2.支持JSX元素。支持多个 JSX 元素作为 children
3.支持JavaScript表达式。用{}包裹表达式即可
4.支持function,如:

function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

5.可以混合多种children,如:

<div>
  Here is a list:
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

6.Booleans, Null, 和 Undefined 会被忽略,下列的JSX是等效的:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>
2018-04-08 14:52:11 qq_19874885 阅读数 292
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

使用《React Native》踩过的坑

React Native简介

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框。

React 是原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。

RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台(Learn once,writeanywhere)。

 

 

环境搭建(Mac版)

环境配置具体参考以下链接:

https://reactnative.cn/docs/0.51/getting-started.html

本机:Mac  

系统:MacOS High Sierra 10.13.4

RN:Version- 0.51

注意事项:因为系统版本的划分,所以在配置React Native环境变量的时候,一定要选择对应的版本进行配置,否则就会导致某些让人很抓狂的结果。(默认系统和RN版本都是最新的),为了防止创建完项目后发现与文档演示的内部文件不同。

 

第一个坑:

mac下安装Brew遇到的错误记录 Warning:/usr/local/bin is not in your PATH.

脱坑:

https://blog.csdn.net/li350887156/article/details/56277528(此方法需要每次在终端输入有关RN的命令时都需要先输入此命令,在进行接下来的命令输入。暂时没有找到一键根治的办法)

 

第二个坑:

常见错误:“RCTBundleURLProvider.h” file notfound”

脱坑:

https://blog.csdn.net/csdn2314/article/details/71215607

 

第三个坑:

运行成功但是发现会报网络错误,如图:

(目前任务史前巨坑,尝试N多方法没有成功)

 

脱坑:(脱坑未完成,下面参考)

https://blog.csdn.net/suyie007/article/details/70768410

 

 

 

 

 

 

 

 

 

                                                                                                                                以上链接均来自网络搜索。


2016-08-17 19:59:39 zhangbohun 阅读数 5152
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

一来就入了深坑呢,React系。。。

记录两个点,开发环境配置,React本身。

1,开发环境配置

由于React中可以使用jsx语法,也为了方便以后开发调试,需要装好些个东西,配置环境等等。。。

nodejs必须要装,基本都npm的命令要会。

webpack这玩意儿要装,否则基本不能实现正常的开发。babel解析jsx需要在webpack打包的过程中实现,配合使用webpack-dev-server热加载,方便随改随见效果。

npm init//初始化
//装需要的库
npm install --save-dev webpack webpack-dev-server//webpack相关的
npm install --save react react-dom react-bootstrap//React相关的
npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015 babel-plugin-transform-object-rest-spread babel-preset-react-hmre//babel相关的
npm install --save-dev css-loader style-loader url-loader//用于打包css
//下面的命令是自己在package.json的scripts中配置的
npm start//实际是热加载命令webpack-dev-server --hot  --inline
接下来是整个项目配置
略╮(╯_╰)╭
//主要就是package.json和webpack.config.js这两个文件

2,React本身

以我现在的理解,最重要的就是jsx和单向数据流动这两样吧。

jsx关键在于自定义的类可以与同名标签等效,这就实现了组件使用最根本的关键。

单向数据流动,方便了React内部实现dom操作,也使得程序的数据流动清晰明了(然而并没有,总会有需要从子到父的数据流动)

另外一些细节的:

两种语法创建react组件

let TextEdit = React.createClass({
    getInitialState() {
        return {
          value: ''
        };
      },
    componentWillReceiveProps(nextProps) {
        this.setState({ value: nextProps.value });
    },
    componentDidUpdate(prevProps,prevState){
      ReactDOM.findDOMNode(this.refs.inputtext).focus();
    },
    handleChange(e) {
    this.setState({ value: e.target.value });
    this.props.onChange(e.target.value);
    // alert(this.state.value);
    },

    render() {
        return (
          <form>
              <FormControl
              ref='inputtext'
                type="text"
                value={this.state.value}
                onChange={this.handleChange}
                readOnly="true"
                autoFocus="true"
              />
          </form>
        );
    }
});

class SetButton extends React.Component{
    constructor(props) {
        super(props);
        this.state = {"value":this.props.num};
  }
  handleClick(event) {
      this.props.onClick(this.state.value);
  }
  render() {
    return (<Button onClick={this.handleClick.bind(this)}>{this.state.value}</Button>);
  }
};

通过回调函数实现子组件传递参数给父组件

父组件把自己的函数传给子组件,子组件调用那个函数的时候传入自己的数据参数。

const Calculator = React.createClass({
    getInitialState: function() {
        return { expression: ''};
    },
    handleClick: function(value) {
        if(value=='=')
        {
          this.setState({expression:eval(this.state.expression)+''});
        }
        else if(value=='b')
        {
          this.setState({expression:this.state.expression.slice(0,-1)});
        }
        else if(value=='c')
        {
          this.setState({expression:''});
        }
        else
        {
            this.setState({expression:this.state.expression+=value});
        }
  },
  handleChange: function(value) {
    this.setState({expression:value});
  },
  render: function() {
    return <div style={{width:'215px'}}>
            <TextEdit onChange={this.handleChange} value={this.state.expression}/>
            <ButtonToolbar>
            <ButtonGroup bsSize="large">
            <SetButton num='1' onClick={this.handleClick}/>
            <SetButton num='2' onClick={this.handleClick}/>
            <SetButton num='3' onClick={this.handleClick}/>
            <SetButton num='/' onClick={this.handleClick}/>
            <SetButton num='(' onClick={this.handleClick}/>
            </ButtonGroup>
            </ButtonToolbar>

            <ButtonToolbar>
            <ButtonGroup bsSize="large">
            <SetButton num='4' onClick={this.handleClick}/>
            <SetButton num='5' onClick={this.handleClick}/>
            <SetButton num='6' onClick={this.handleClick}/>
            <SetButton num='*' onClick={this.handleClick}/>
            <SetButton num=')' onClick={this.handleClick}/>
            </ButtonGroup>
             </ButtonToolbar>

            <ButtonToolbar>
            <ButtonGroup bsSize="large">
            <SetButton num='7' onClick={this.handleClick}/>
            <SetButton num='8' onClick={this.handleClick}/>
            <SetButton num='9' onClick={this.handleClick}/>
            <SetButton num='-' onClick={this.handleClick}/>
            <SetButton num='b' onClick={this.handleClick}/>
            </ButtonGroup>
            </ButtonToolbar>

            <ButtonToolbar>
            <ButtonGroup bsSize="large">
            <SetButton num='0' onClick={this.handleClick}/>
            <SetButton num='.' onClick={this.handleClick}/>
            <SetButton num='=' onClick={this.handleClick}/>
            <SetButton num='+' onClick={this.handleClick}/>
            <SetButton num='c' onClick={this.handleClick}/>
            </ButtonGroup>
            </ButtonToolbar>
          </div>;
  }
});

以上代码实现里一个简单的计算器的功能。

不完整,前后补上

var React = require('react')
var ReactDOM = require('react-dom')
var ReactBootstrap = require('react-bootstrap')
var Button = ReactBootstrap.Button;
var ButtonGroup = ReactBootstrap.ButtonGroup;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var FormControl = ReactBootstrap.FormControl;

export default Calculator;

这就是一个可用的计算器组件了。

使用的例子,把这个计算器放到id为info的div里:

var React = require('react')
var ReactDOM = require('react-dom')
import Calculator from './calculator.jsx'
ReactDOM.render(
  <Calculator/>,
  document.getElementById('info')
)

初学,献丑了,哈哈。

 

 

2016-08-02 21:57:42 qq_32506555 阅读数 928
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

1 前言

React目前在前端的影响力就不多说了,不管你目前有没有入坑React,估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算,或者刚开始学习React ,可以参考一下下面内容。如果你已是React达人,可以绕过(当然也很欢迎指出不足)。本文不是API文档,也不是代码搬运工,只是谈一下学习React的一些心得和Tips

 

2 入坑React的原因

前端的伙伴们都知道,我们的技术氛围十分活跃,要跟进所有新的技术,保持不落伍不是一件容易的事情。所以,我们必须把有限的学习精力花在能持续产生价值的事情上面。作为参考,我本人学习和使用React的原因有以下几点:

好多人都在搞啊,Facebook在维护啊,生态好啊,总不会那么容易过时吧(从众心理)

UI组件组织很爽,在开发时会不自觉地提取组件,再次开发时组织原有组件,效率高。

数据与UI解耦,单向数据流使逻辑清晰,告别jquery时代的混乱。

React的美好蓝图:跨端(React Native)和同构(Server Rending)。后台?终端APPWe can, we up!

业务里新项目已经使用,老项目准备切到React.(最有力的原因。。)

 

3 转换思维

之前使用Jquery开发和组织项目的同学,如果没有接触过类似mvvm的框架的,在入门React的时,有些思维方式需要转换一下。建议看一下React官方文档:Thinking in React

3.1 模块思维 => 组件思维

先说明一下模块和组件的区别:组件是具有规范接口的模块。说明完毕。模块是拆分应用的基本手段(使用如CommonJS, AMD等模块管理方案),而组件是将模块按照某个体系(组件体系)加以规范,同一体系中的组件可很方便地复用。

在使用React开发的时候,先把应用按层级拆分成组件(不只是模块)。不论组件后续是否能复用,必须也只能做成组件。当组件存在复用的可能时,就考虑把可复用的部分抽离成单独的组件。这会使你的应用层次非常分明,并且可复用性较高。

3.2 面向过程 => 面向数据

React提供了一套很好的UI机制,操作UI的途径是操作数据。所以,在一开始设计应用时,除了按层次拆分组件,下一件要做的事就是要设计应用需要的数据。数据同样也要护照层级设计,并对应到具体组件上。原来通过Jquery选择器操作Dom的方式直接摒弃,通过操作数据的方式改改变组件行为和展示。

初始化操作 => 设置初始化数据(传递props

默认操作 => 设置默认数据(定义defaultProps

改变当前组件行为/展示 => 设置当前组件状态数据(this.setState

改变其他组件行为/展示 => 执行上层组件的回调,由上导组件修改要改变的组件的数据(props

3.3 事件循环 => 组件生命周期循环

Jquery组织的应用中,事件响应通常是业务逻辑的集中营。里面会分发和改变应用的各种状态与展示。在React中,应用的状态和行为由数据和组件来管控。以前关注的事件循环,现在只需要关注对应组件的生命周期就行了,可以在生命周期的各个切面里执行你想要的操作。

 

4 Tips

4.1 使用ES6

反正都要用babel编译jsx了,不妨顺应潮流,把ES6也编译了吧。

javascript是我们的饭碗,是时候提前适应一下升级版的饭碗了。

上上github,看下React相关的项目,你也不想一脸懵逼吧?

注意浏览器兼容性,有时候你可能需要pollifill

4.2 propsstate

props对于组件自己来说是常量,是父组件赋予给自己的,不要尝试要任何地方修改它(身体发肤,受之父母,不敢毁伤,孝之始也)。

state才是组件自己的个性,只和自己组件相关的数据可以放在这里,并且自己可以修改(你有你的个性,但请不要影响他人)。

应用太复杂,数据层级深?管理不易,使用Redux吧。

4.3 生命周期:反省自己的一生

学习组件生命周期的顺序和原理。

注意不要限入无限轮回。有的生命周期(componentWillUpdate)中设置数据可能会让你的组件进入渲染的死循环。什么?还是死循环了?看看你是不是用了什么Mixin或者高阶组件,它们有可能干涉你组件的生命周期。

shouldComponentUpdate 这个生命周期比较重要,性能优化集中在这里。

componentDidMount Server端的组件生命到此为止,后续再无。

4.4 好用的工具

classnames 让你免去拼接类名的烦恼

immutablejs Redux搭配效果不错,前提是你接受它的写法(必须通过get方法取属性值)

redux-thunk 如果你要用Redux,很可能就要用到它

 

 

 

 

原文来自:imweb

 

入坑React系列二

阅读数 105

react防坑指南

阅读数 166

没有更多推荐了,返回首页