react常见问题_react面试常见问题 - CSDN
  • React问题汇总

    2017-01-05 14:27:22
    ReactNative 常见问题汇总(1)   作者 草帽团_山治 关注 2016.08.22 15:42 字数 809 阅读 763 评论 1 喜欢 4 总想说点啥 最近在学习ReactNative,感慨良多;由于当年太任性,...

    ReactNative 常见问题汇总(1)

    E1fa8b137741 
    作者 草帽团_山治 
    2016.08.22 15:42 字数 809 阅读 763 评论 1 

    总想说点啥

    最近在学习ReactNative,感慨良多;由于当年太任性,没有好好学习JS,现在想想可谓是痛心疾首啊!不过话又说回来,好像ReactNative跟JS没有什么太大的关联,但又没有太大的区别(以上是个人观点,不代表任何立场;本人是个菜鸟一枚,见解不到位的,望大神私信指正,在此先叩谢!)。

    使用ReactNative需要搭建RN开发环境,在此就不介绍了,因为网上特别多,请随意百度;而我采用的是FaceBook推荐的IDE(Atom+Nuclide)安装教程(Windows平台的小伙伴还请自行百度哦),这样安装可以解决网上说的Atom性能卡顿的问题。

    书归正传

    ReactNative常见问题汇总笔记一

    1. Can't find variable: xxxx

    屏幕快照 2016-08-22 上午9.47.46.png

      问题分析:搞IT的就算英文再烂应该也能看懂这句log吧,所以缺少什么就导入什么文件;
       Debug:是系统自带的Component的话,就在当前JS中找到Import {........} from 'react-native',在{}中添加对应的名称就可以了;如果不是系统的,那就自行创建这个Component.

    2. Unable to find this module in its module map or any of the node_modules directories under ......

    屏幕快照 2016-08-22 上午11.08.29.png

      问题分析:这句话的意思是‘在模块映射或任何node_modules目录下都无法找到该模块’,因此查看一下是否有引用到没有导入的Component;
      Debug:因此找到图中的module 在代码中核查这个路径是否存在该Component;解决方法如下:
    改正前:

    import MySceneComponent from '../MySceneComponent';

    改正后:

    import MySceneComponent from './MySceneComponent';
    3. Unhandled JS Exception: null is not an object (evaluating 'this.state.xxx')

    屏幕快照 2016-08-22 上午11.19.17.png

      问题分析:ES6的初始化需要把初始化的对象放在Constructor方法中,而不是放在getInitialState中;而如果是采用的是React.createClass的话就是可以把初始化放在getInitialState之中,因此分情况而定;
      Debug:具体情况具体分析。

    #4. this.setState is not a function

    屏幕快照 2016-08-22 上午11.33.12.png

      问题分析:是说这个状态设置不是一个函数;在react中的this作为的是组件的实例,当成功回调的时候,就改变了this的指向;react中支持箭头(=>)指向this,和bind()函数绑定组件实例(注:据说bind()是ES5的方法,由于我的ES没有一点点的涉及,所以这是网友说的);
      Debug:根据红色的错误日志点击第一条日志,然后在IDE中修改代码为

    使用bind()绑定组件方案:

    onRefresh={this._onRefresh.bind(this)}

    使用ES6新特性箭头函数=>()的解决方案:

    onRefresh={() => {this._onRefresh()}}
    展开全文
  • React常见问题解决

    2020-03-25 14:44:40
    React常见问题解决 本文是基于Windows 10系统环境,学习和使用React: Windows 10 一、react常见问题解决方案 (1) 拼接字符串(常量+变量) const variable = 'department' const param1 = 'inspur' const param2...

    React常见问题解决

    本文是基于Windows 10系统环境,学习和使用React:

    • Windows 10

    一、react常见问题解决方案

    (1) 拼接字符串(常量+变量)

    const variable = 'department'
    const param1 = 'inspur'
    const param2 = 'chaoyue'
    <a href={'https://wap.inspur.com/' + variable}>
    	${param1}--${param2}
    </a>
    //inspur--chaoyue
    
    <FormItem label={formatMessage({ id: 'app.mail.read' })}>
        {getFieldDecorator('senderInfo', {
            initialValue: `${sender}--${time}`
        }
        )(
            <Input readOnly />
        )}
    </FormItem>
    

    (2) 阻止默认事件和冒泡

    handleCheck = (e, item) => {
            e.stopPropagation();
            console.log('handleCheck');
            console.log(item);
        }
    

    (3) 设置启动的端口号

    ## 打开react项目的 package.json文件
    ## 将 scripts中的start键值对
      "start": "react-app-rewired start"
    ## 修改为
      "start": "set PORT=3008&&react-app-rewired start",
    

    (4) 输出<,<=,>,>=

    <span>&gt</span> # >
    <span>&ge</span> # >=
    <span>&lt</span> # <
    <span>&le</span> # <=
    

    (5) 合并两个列表

    let a = [1, 2, 3];
    let b = [4, 5, 6];
    let c = a.concat(b);
    console.log(c); // c= [1, 2, 3, 4, 5, 6]
    

    二、ant design常见问题解决方案

    (1) 设置Select下拉框的显示层级

    <Select dropdownStyle={{ zIndex: 10001 }}>
        <Option value='chaoyue'>浪潮超越</Option>
    </Select>
    

    展开全文
  • React常见的15个问题

    2019-04-26 11:53:26
    原文:React.js 常见问题 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 在 jsComplete,我们管理一个专门用于帮助编程学习者 slack 帐户。我们常常会收到一些有趣的问题,但大多数问题都是常见问题。 ...

    摘要: 学习React。

    Fundebug经授权转载,版权归原作者所有。

    jsComplete,我们管理一个专门用于帮助编程学习者 slack 帐户。我们常常会收到一些有趣的问题,但大多数问题都是常见问题。 我创建这个资源为了帮助 React.js学习者遇到这些常见的问题时提供一定帮助。在这里可以快速找到一些常见问题的解决方案,而不是一,遍又一遍去找解决方法,我会持续更新这些常见的问题。

    1. 组件的名称开头要大写

    React 组件名称必须具有以大写字母开头。

    如果组件名称不以大写字母开头,则组件使用将被视为内置元素,例如 divspan

    例如:

    class greeting extends React.Component { 
      // ...
    }

    如果尝试渲染 <greeting />,React 将忽略上述内容,会报以下警告:

    Warning: The tag <greeting> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

    这里更大的问题是把组件命名为 buttonimg。 React 会忽略你的组件,只是渲染一个普通 HTML buttonimg 标签。

    注意上面没有渲染 “My Awesome Button” 和 React 刚刚呈现的空 HTML 按钮元素。 在这种情况下,React 不会警告你。

    2. 使用单引号而不是反引号

    用反引号()创建的字符串与用单引号('…')创建的字符串不同。

    在大多数键盘上,可以使用 tab 键上方的键来输入用反引号( ` )字符。

    当需要在字符串中包含动态表达式时,使用反引号创建一个字符串(不需要使用字符串连接)。

    `This is a string template literal that can include expressions`
    'This is just a string, you cannot include expressions here'

    假设你想要一个始终报告当前时间的字符串:

    “Time is ...”

    // Current time string
    const time = new Date().toLocaleTimeString();
    // 使用普通字符串(单引号或双引号)时,需要使用字符串连接:
    'Time is ' + time
    // 在使用反引号时,可以使用 ${} 在字符串中注入时间
    `Time is ${time}`

    此外,反引号还声明一个字符串时,可以创建一个跨多行的字符串:

    const template = `I
    CAN
    SPAN
    Multiple Lines`;

    常规字符串不能这样做。

    3. 使用React.PropTypes

    PropTypes 对象已从 React 中删除。 其过去是以 React.PropTypes 的形式被使用,但不能再使用它了。

    相应的,你需要:

    1. npm install prop-types
    2. import PropTypes from 'prop-types'

    然后就可以使用它啦,如: PropTypes.string

    如果你错误地使用了 React.PropTypes,会得到这样的错误提示:

    TypeError: Cannot read property 'string' of undefined

    4. 没有使用指南里指定的版本

    在看或阅读有关代码的内容以及使用指南里的例子时,确保你使用的库版本与例子的里的版本是一致的。一般使用最新版本是没有问题,但是如果内容过时,你可能会遇到一些弃用问题。

    为了安全起见,请使用主干版本。 例如,如果教程里使用的是 React 16,自己就不要使用 React 15 进行开发了。

    这对 Node.js 也很重要。如果使用旧版本的 Node,会遇到一系列问题。 例如,如果你正在看一些教程,这些教程使用了 Object.values,而你现在用 Node 6.x,那个版本此方法是不存在的。 你需要 Node 7.x 或更高版本。

    5. 令人困惑的函数与类

    你能看出下面的代码有什么问题吗?

    class Numbers extends React.Component {
      const arrayOfNumbers = _.range(1, 10);
      // ...
    }

    上面的代码是无效的,因为在 JavaScript 类的内部,不能随意定义变量,只能使用规定的语法定义方法和属性。

    这有点令人困惑,因为类语法中使用的{}看起来像块级作用域,但它并不是。

    在一个由函数构成的组件里,你就可以想怎么搞就怎么搞:

    // Totally Okay:
    const Number = (props) => {
      const arrayOfNumbers = _.range(1, 10);
      // ...
    };

    6. 将数字作为字符串传递

    你可以通过 prop 属性传递一个字符串:

    <Greeting name="World" />

    如果需要传递一个数值,不要使用字符串:

    // 不要这样做
    <Greeting counter="7" />

    相反,使用花括号传递一个实际的数值:

    <Greeting counter={7} />

    在 Greeting 组件中使用 {7}this.props.counter 就被赋值为数字 7 ,并且可以对其进行数学运算。 如果将其作为“7”传递,然后将其视为数字,则可能会遇到意外结果。

    7. 忘记了另外一个 app 在用同样的端口

    要运行 web 服务器,需要使用主机(如 127.0.0.1 )和端口(如 8080)使服务器侦听有效 http 地址上的请求。

    一旦成功运行,web 服务器就占据了那个端口,你就不能让这个端口它用,端口会被占用。

    如果你尝试在另一个终端上运行相同的服务器,将会得到端口被占用的错误提示,如下:

    Error: listen EADDRINUSE 127.0.0.1:8080

    请注意,有时 Web 服务器可能在后台运行或在分离的屏幕/tmux 会话中运行。你看不到,但它仍然占据了端口。 要重新启动服务器,需要“杀死”仍在运行的服务器。

    要识别使用某个端口的进程,可以使用 ps 之类的命令(以及关于应用程序的grep),或者如果你知道端口号,则可以使用 lsof 命令:

    lsof -i :8080

    8. 忘记创建环境变量

    有些项目依赖于 shell 环境变量的存在才能启动。 如果在没有所需环境变量的情况下运行这些项目,它们将尝试为它们使用未定义的值,并可能会给你一些神秘的错误。

    例如,如果项目连接到像 MongoDB 这样的数据库,则可能会使用像 process.env.MONGO_URI这样的环境变量来连接它。 这允许项目与不同环境中的不同MongoDB 实例一起使用。

    要在本地运行连接到 MongoDB 的项目,首先必须导出 MONGO_URI 环境变量。 例如,如果你在端口 27017 上运行本地 MongoDB,则需要在运行项目之前执行此操作:

    export MONGO_URI="mongodb://localhost:27017/mydb"

    你可以 grep 项目源代码,找到 process.env 来查清楚其运行正常所需要的环境变量。

    9. 把花括号{}和圆括号()搞混

    不要用:

    return {
      something();
    };

    这样用:

    return (
      something();
    );

    第一个将尝试(并且会失败)返回一个对象,而第二个将正确调用 something() 函数并返回该函数返回的内容。

    因为 JSX 中的任何 <tag> 都将转换为函数调用,所以在返回任何 JSX 时都会出现这个问题。

    这个问题在箭头函数的缩写语法中也很常见。

    不要用:

    const Greeting = () => {
      <div>
        Hello World
      </div>
    };

    这样用:

    const Greeting = () => (
      <div>
        Hello World
      </div>
    );

    当你使用带有箭头函数的中括号时,你就新起了一个函数的作用域。箭头函数的缩写语法不用中括号。

    代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

    10. 不使用圆括号包装对象

    当你想要创建一个返回普通对象的箭头函数时,上面的花括号和圆括号问题也会让你感到困惑。

    不要用:

    const myAction = () => { type: 'DO_THIS' };

    这样用:

    const myAction = () => ({ type: 'DO_THIS'});

    如果没有把对象包裹在圆括号里,你就不能使用缩写语法。实际上你会给字符串定义一个标签。

    这在 setState 方法的 updater 函数中很常见,因为它需要返回一个对象。 如果要使用箭头函数语法,则需要用括号包装该对象。

    不要用:

    this.setState(prevState => { answer: 42 });

    这样用:

    this.setState(prevState => ({ answer: 42 }));

    11. 没有正确使用API元素和属性的大小写

    使用 React.Component,而不是 React.component。 使用 componentDidMount,而不是 ComponentDidMount。使用 ReactDOM,而不是ReactDom

    请注意需要的 API 大小写。 如果使用不正确的大小写,得到的错误信息可能不会很明确。

    reactreact-dom 导入时,确保引入正确的名称,并且使用的内容与引入完全相同,ESLint 可以帮助你指出未使用的内容。

    在处理组件属性时也会遇到这种问题:

    <Greeting userName="Max" />
    // 在组件内部,你需要使用 props.userName 来获取传入的值

    如果你没有使用 props.userName,而是 props.usernameprops.UserName,你会相当于用了一个 undefined 的值。需要特别留意下这点,当然更好的是配置 ESLint,它也能指出这些问题。

    12. 将 state 对象与实例属性搞混

    在类组件中,可以定义本地 state 对象,然后使用 this 访问它:

    class Greeting extends React.Component {
      state = {
        name: "World",
      };
      render() {
        return `Hello ${this.state.name}`;
      }
    }

    以上代码会输出 “Hello World”

    state 之外,你还可以定义其它本地实例属性。

    class Greeting extends React.Component {
      user = {
        name: "World",
      };
      render() {
        return `Hello ${this.user.name}`;
      }
    }

    以上代码也会输出 “Hello World”

    state 实例属性是一个特殊属性,因为 React 会管理它。 你只能通过 setState 更改它,当你这样做时 React 会做出响应。

    然而,定义的所有其他实例属性对渲染算法没有影响。 你可以根据需要在上面的示例中更改this.user,并且 React 不会在React中触发渲染机制。

    13. 将 与 tag> 搞混

    在闭合标签里放错 / 字符。不可否认,有时你可以使用 <tag/>,而其他时间你需要</tag>

    在 HTML 中,有一种称为“自闭合标签”(AKA void tag)。这些是表示没有任何子节点的元素的标记。例如,img 标签是一个自闭合标签:

    <img src="..." />
    // 不必使用 <img></img>

    div标签可以包含子项,因此你可以使用开始和结束标记:

    <div>
      Children here...
    </div>

    这同样适用于 Reac t组件,如果组件具有子元素,如下所示:

    <Greeting>Hello!</Greeting>
    // 注意/字符的位置

    如果组件没有子元素,可以用开始/结束标签书写,或者用自闭合标签:

    // 两种方式
    <Greeting></Greeting>
    <Greeting />

    以下方式是非法的:

    // 错误
    <Greeting><Greeting />  

    如果放错放了 / 字符的位置,将收到如下错误:

    Syntax error: Unterminated JSX contents

    14. 假设 import/export 起作用

    import/export 特性是 JavaScript 中的官方功能(自2015年起)。 其只是 ES2015 的特性,并且还没有在流行浏览器和最新版 Node 里面被完整支持。

    React 项目的流行配置使用 Webpack 和 Babel。 两者都允许使用此特性并将其编译为所有浏览器都能理解的内容。 只有工作流中有 Webpack 或 Babel 之类的转译工具,才能使用 import/export

    但是,在 React 打包应用程序中 import/export 不意味着可以随意使用它们! 例如,如果你还通过最新的 Node 进行服务器端渲染,会行不通,你很可能会收到“unexpected token” 错误。

    要让 Node 理解 import/export(如果你在前端使用它们就是你需要了解它们,并且也想要做 SSR 渲染的话),你需要有可以编译其的 Babel preset(像是_env_ preset),才能在Node 端运行。 你可以在开发时使用像 pm2_、 _nodemon 和 _babel-watch_的工具做到这点,,并在每次更改内容时重新启动 Node。

    15. 不绑定处理程序方法

    我把这个留到最后,因为这是一个大问题,一个很常见的问题。

    你可以在 React 组件中定义类方法,然后在组件的 render 方法中使用它们。 例如:

    class Greeting extends React.Component {
      whoIsThis() {
        console.dir(this); // "this" is the caller of whoIsThis
        return "World";
      }
      render() {
        return `Hello ${this.whoIsThis()}`;
      }
    }
    ReactDOM.render(<Greeting />, mountNode);

    我在 render 里以 this.whoIsThis 的方式调用 whoIsThis 方法,因为在 render中,this 关键字指的是与表示组件的 DOM 元素关联的组件实例。

    内部 React 确保其类方法中的 “this” 指向实例。 但是,当你使用 whoIsThis 方法的引用时,JavaScript 不会自动绑定实例。

    whoIsThis 方法中的 console.dir 可以正确告诉我们当前组件实例,因为该方法是使用显式调用方(this)直接从 render 方法调用的。 执行上面的代码时,在控制台中看到Greeting 对象:

    然而,当在延迟执行通道,例如事件处理里执行同样方法时,调用对象将不再是显性的,console.dir 也不会打印当前组件实例。

    在上面的代码中,当单击字符串时,React 会调用 whoIsThis 方法,但它不会让你访问组件实例。 这就是我们点击字符串时得到 undefined 的原因。 如果类方法需要访问像this.propsthis.state 这样的属性,这会是一个问题,因为它根本行不通。

    对于这个问题有很多解决方案。可以将方法包装在内联函数中,或使用 .bind 来改变 this 指向。 对于不经常更新的组件,两者都可以。

    还可以通过在类的构造函数中而不是在 render 方法中执行来优化 bind 方法。 但是,此方法的最佳解决方案是通过 Babel 来使用 ECMAScript 类字段我(目前还是stage-3),这样对于处理程序只需使用箭头函数就可以了:

    class Greeting extends React.Component {
      whoIsThis = () => {
        console.dir(this);
      }
      render() {
        return (
         <div onClick={this.whoIsThis}>
            Hello World
          </div>
        );
      }
    }

    这样会和预期一样执行:

    原文:React.js Commonly Faced Problems

    展开全文
  • React常见的15个问题

    2019-02-14 09:12:05
    原文:React.js 常见问题 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 在 jsComplete,我们管理一个专门用于帮助编程学习者 slack 帐户。我们常常会收到一些有趣的问题,但大多数问题都是常见问题。 我...

    摘要: 学习React。

    Fundebug经授权转载,版权归原作者所有。

    jsComplete,我们管理一个专门用于帮助编程学习者 slack 帐户。我们常常会收到一些有趣的问题,但大多数问题都是常见问题。 我创建这个资源为了帮助 React.js学习者遇到这些常见的问题时提供一定帮助。在这里可以快速找到一些常见问题的解决方案,而不是一,遍又一遍去找解决方法,我会持续更新这些常见的问题。

    1. 组件的名称开头要大写

    React 组件名称必须具有以大写字母开头。

    如果组件名称不以大写字母开头,则组件使用将被视为内置元素,例如 divspan

    例如:

    class greeting extends React.Component { 
      // ...
    }
    

    如果尝试渲染 <greeting />,React 将忽略上述内容,会报以下警告:

    Warning: The tag <greeting> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    

    这里更大的问题是把组件命名为 buttonimg。 React 会忽略你的组件,只是渲染一个普通 HTML buttonimg 标签。

    注意上面没有渲染 “My Awesome Button” 和 React 刚刚呈现的空 HTML 按钮元素。 在这种情况下,React 不会警告你。

    2. 使用单引号而不是反引号

    用反引号()创建的字符串与用单引号('…')创建的字符串不同。

    在大多数键盘上,可以使用 tab 键上方的键来输入用反引号( ` )字符。

    当需要在字符串中包含动态表达式时,使用反引号创建一个字符串(不需要使用字符串连接)。

    `This is a string template literal that can include expressions`
    'This is just a string, you cannot include expressions here'
    

    假设你想要一个始终报告当前时间的字符串:

    “Time is …”

    // Current time string
    const time = new Date().toLocaleTimeString();
    // 使用普通字符串(单引号或双引号)时,需要使用字符串连接:
    'Time is ' + time
    // 在使用反引号时,可以使用 ${} 在字符串中注入时间
    `Time is ${time}`
    

    此外,反引号还声明一个字符串时,可以创建一个跨多行的字符串:

    const template = `I
    CAN
    SPAN
    Multiple Lines`;
    

    常规字符串不能这样做。

    3. 使用React.PropTypes

    PropTypes 对象已从 React 中删除。 其过去是以 React.PropTypes 的形式被使用,但不能再使用它了。

    相应的,你需要:

    1. npm install prop-types
    2. import PropTypes from 'prop-types'

    然后就可以使用它啦,如: PropTypes.string

    如果你错误地使用了 React.PropTypes,会得到这样的错误提示:

    TypeError: Cannot read property 'string' of undefined
    

    4. 没有使用指南里指定的版本

    在看或阅读有关代码的内容以及使用指南里的例子时,确保你使用的库版本与例子的里的版本是一致的。一般使用最新版本是没有问题,但是如果内容过时,你可能会遇到一些弃用问题。

    为了安全起见,请使用主干版本。 例如,如果教程里使用的是 React 16,自己就不要使用 React 15 进行开发了。

    这对 Node.js 也很重要。如果使用旧版本的 Node,会遇到一系列问题。 例如,如果你正在看一些教程,这些教程使用了 Object.values,而你现在用 Node 6.x,那个版本此方法是不存在的。 你需要 Node 7.x 或更高版本。

    5. 令人困惑的函数与类

    你能看出下面的代码有什么问题吗?

    class Numbers extends React.Component {
      const arrayOfNumbers = _.range(1, 10);
      // ...
    }
    

    上面的代码是无效的,因为在 JavaScript 类的内部,不能随意定义变量,只能使用规定的语法定义方法和属性。

    这有点令人困惑,因为类语法中使用的{}看起来像块级作用域,但它并不是。

    在一个由函数构成的组件里,你就可以想怎么搞就怎么搞:

    // Totally Okay:
    const Number = (props) => {
      const arrayOfNumbers = _.range(1, 10);
      // ...
    };
    

    6. 将数字作为字符串传递

    你可以通过 prop 属性传递一个字符串:

    <Greeting name="World" />
    

    如果需要传递一个数值,不要使用字符串:

    // 不要这样做
    <Greeting counter="7" />
    

    相反,使用花括号传递一个实际的数值:

    <Greeting counter={7} />
    

    在 Greeting 组件中使用 {7}this.props.counter 就被赋值为数字 7 ,并且可以对其进行数学运算。 如果将其作为“7”传递,然后将其视为数字,则可能会遇到意外结果。

    7. 忘记了另外一个 app 在用同样的端口

    要运行 web 服务器,需要使用主机(如 127.0.0.1 )和端口(如 8080)使服务器侦听有效 http 地址上的请求。

    一旦成功运行,web 服务器就占据了那个端口,你就不能让这个端口它用,端口会被占用。

    如果你尝试在另一个终端上运行相同的服务器,将会得到端口被占用的错误提示,如下:

    Error: listen EADDRINUSE 127.0.0.1:8080
    

    请注意,有时 Web 服务器可能在后台运行或在分离的屏幕/tmux 会话中运行。你看不到,但它仍然占据了端口。 要重新启动服务器,需要“杀死”仍在运行的服务器。

    要识别使用某个端口的进程,可以使用 ps 之类的命令(以及关于应用程序的grep),或者如果你知道端口号,则可以使用 lsof 命令:

    lsof -i :8080
    

    8. 忘记创建环境变量

    有些项目依赖于 shell 环境变量的存在才能启动。 如果在没有所需环境变量的情况下运行这些项目,它们将尝试为它们使用未定义的值,并可能会给你一些神秘的错误。

    例如,如果项目连接到像 MongoDB 这样的数据库,则可能会使用像 process.env.MONGO_URI这样的环境变量来连接它。 这允许项目与不同环境中的不同MongoDB 实例一起使用。

    要在本地运行连接到 MongoDB 的项目,首先必须导出 MONGO_URI 环境变量。 例如,如果你在端口 27017 上运行本地 MongoDB,则需要在运行项目之前执行此操作:

    export MONGO_URI="mongodb://localhost:27017/mydb"
    

    你可以 grep 项目源代码,找到 process.env 来查清楚其运行正常所需要的环境变量。

    9. 把花括号{}和圆括号()搞混

    不要用:

    return {
      something();
    };
    

    这样用:

    return (
      something();
    );
    

    第一个将尝试(并且会失败)返回一个对象,而第二个将正确调用 something() 函数并返回该函数返回的内容。

    因为 JSX 中的任何 <tag> 都将转换为函数调用,所以在返回任何 JSX 时都会出现这个问题。

    这个问题在箭头函数的缩写语法中也很常见。

    不要用:

    const Greeting = () => {
      <div>
        Hello World
      </div>
    };
    

    这样用:

    const Greeting = () => (
      <div>
        Hello World
      </div>
    );
    

    当你使用带有箭头函数的中括号时,你就新起了一个函数的作用域。箭头函数的缩写语法不用中括号。

    代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug

    10. 不使用圆括号包装对象

    当你想要创建一个返回普通对象的箭头函数时,上面的花括号和圆括号问题也会让你感到困惑。

    不要用:

    const myAction = () => { type: 'DO_THIS' };
    

    这样用:

    const myAction = () => ({ type: 'DO_THIS'});
    

    如果没有把对象包裹在圆括号里,你就不能使用缩写语法。实际上你会给字符串定义一个标签。

    这在 setState 方法的 updater 函数中很常见,因为它需要返回一个对象。 如果要使用箭头函数语法,则需要用括号包装该对象。

    不要用:

    this.setState(prevState => { answer: 42 });
    

    这样用:

    this.setState(prevState => ({ answer: 42 }));
    

    11. 没有正确使用API元素和属性的大小写

    使用 React.Component,而不是 React.component。 使用 componentDidMount,而不是 ComponentDidMount。使用 ReactDOM,而不是ReactDom

    请注意需要的 API 大小写。 如果使用不正确的大小写,得到的错误信息可能不会很明确。

    reactreact-dom 导入时,确保引入正确的名称,并且使用的内容与引入完全相同,ESLint 可以帮助你指出未使用的内容。

    在处理组件属性时也会遇到这种问题:

    <Greeting userName="Max" />
    // 在组件内部,你需要使用 props.userName 来获取传入的值
    

    如果你没有使用 props.userName,而是 props.usernameprops.UserName,你会相当于用了一个 undefined 的值。需要特别留意下这点,当然更好的是配置 ESLint,它也能指出这些问题。

    12. 将 state 对象与实例属性搞混

    在类组件中,可以定义本地 state 对象,然后使用 this 访问它:

    class Greeting extends React.Component {
      state = {
        name: "World",
      };
      render() {
        return `Hello ${this.state.name}`;
      }
    }
    

    以上代码会输出 “Hello World”

    state 之外,你还可以定义其它本地实例属性。

    class Greeting extends React.Component {
      user = {
        name: "World",
      };
      render() {
        return `Hello ${this.user.name}`;
      }
    }
    

    以上代码也会输出 “Hello World”

    state 实例属性是一个特殊属性,因为 React 会管理它。 你只能通过 setState 更改它,当你这样做时 React 会做出响应。

    然而,定义的所有其他实例属性对渲染算法没有影响。 你可以根据需要在上面的示例中更改this.user,并且 React 不会在React中触发渲染机制。

    13. 将 与</ tag> 搞混

    在闭合标签里放错 / 字符。不可否认,有时你可以使用 <tag/>,而其他时间你需要</tag>

    在 HTML 中,有一种称为“自闭合标签”(AKA void tag)。这些是表示没有任何子节点的元素的标记。例如,img 标签是一个自闭合标签:

    <img src="..." />
    // 不必使用 <img></img>
    

    div标签可以包含子项,因此你可以使用开始和结束标记:

    <div>
      Children here...
    </div>
    

    这同样适用于 Reac t组件,如果组件具有子元素,如下所示:

    <Greeting>Hello!</Greeting>
    // 注意/字符的位置
    

    如果组件没有子元素,可以用开始/结束标签书写,或者用自闭合标签:

    // 两种方式
    <Greeting></Greeting>
    <Greeting />
    

    以下方式是非法的:

    // 错误
    <Greeting><Greeting />  
    

    如果放错放了 / 字符的位置,将收到如下错误:

    Syntax error: Unterminated JSX contents
    

    14. 假设 import/export 起作用

    import/export 特性是 JavaScript 中的官方功能(自2015年起)。 其只是 ES2015 的特性,并且还没有在流行浏览器和最新版 Node 里面被完整支持。

    React 项目的流行配置使用 Webpack 和 Babel。 两者都允许使用此特性并将其编译为所有浏览器都能理解的内容。 只有工作流中有 Webpack 或 Babel 之类的转译工具,才能使用 import/export

    但是,在 React 打包应用程序中 import/export 不意味着可以随意使用它们! 例如,如果你还通过最新的 Node 进行服务器端渲染,会行不通,你很可能会收到“unexpected token” 错误。

    要让 Node 理解 import/export(如果你在前端使用它们就是你需要了解它们,并且也想要做 SSR 渲染的话),你需要有可以编译其的 Babel preset(像是_env_ preset),才能在Node 端运行。 你可以在开发时使用像 pm2_、 _nodemon 和 _babel-watch_的工具做到这点,,并在每次更改内容时重新启动 Node。

    15. 不绑定处理程序方法

    我把这个留到最后,因为这是一个大问题,一个很常见的问题。

    你可以在 React 组件中定义类方法,然后在组件的 render 方法中使用它们。 例如:

    class Greeting extends React.Component {
      whoIsThis() {
        console.dir(this); // "this" is the caller of whoIsThis
        return "World";
      }
      render() {
        return `Hello ${this.whoIsThis()}`;
      }
    }
    ReactDOM.render(<Greeting />, mountNode);
    

    我在 render 里以 this.whoIsThis 的方式调用 whoIsThis 方法,因为在 render中,this 关键字指的是与表示组件的 DOM 元素关联的组件实例。

    内部 React 确保其类方法中的 “this” 指向实例。 但是,当你使用 whoIsThis 方法的引用时,JavaScript 不会自动绑定实例。

    whoIsThis 方法中的 console.dir 可以正确告诉我们当前组件实例,因为该方法是使用显式调用方(this)直接从 render 方法调用的。 执行上面的代码时,在控制台中看到Greeting 对象:

    然而,当在延迟执行通道,例如事件处理里执行同样方法时,调用对象将不再是显性的,console.dir 也不会打印当前组件实例。

    在上面的代码中,当单击字符串时,React 会调用 whoIsThis 方法,但它不会让你访问组件实例。 这就是我们点击字符串时得到 undefined 的原因。 如果类方法需要访问像this.propsthis.state 这样的属性,这会是一个问题,因为它根本行不通。

    对于这个问题有很多解决方案。可以将方法包装在内联函数中,或使用 .bind 来改变 this 指向。 对于不经常更新的组件,两者都可以。

    还可以通过在类的构造函数中而不是在 render 方法中执行来优化 bind 方法。 但是,此方法的最佳解决方案是通过 Babel 来使用 ECMAScript 类字段我(目前还是stage-3),这样对于处理程序只需使用箭头函数就可以了:

    class Greeting extends React.Component {
      whoIsThis = () => {
        console.dir(this);
      }
      render() {
        return (
         <div onClick={this.whoIsThis}>
            Hello World
          </div>
        );
      }
    }
    

    这样会和预期一样执行:

    原文:React.js Commonly Faced Problems

    关于Fundebug

    Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用

    展开全文
  • 第一部分:react部分 1.react中不同组件之间如何做到数据交互?组件通信 2.react生命周期函数? 3.react性能优化是哪个周期函数? 4.react中 虚拟 dom 会提高性能? 5.react中 diff 算法原理? 6.react中refs的作用是...

    第一部分:react部分
    1.react中不同组件之间如何做到数据交互?组件通信
    2.react生命周期函数?
    3.react性能优化是哪个周期函数?
    4.react中 虚拟 dom 会提高性能?
    5.react中 diff 算法原理?
    6.react中refs的作用是什么?
    7.react中key的作用是什么?
    8.React组件中props和state有什么区别?
    9.react中setstate之后做了什么?
    10.高阶组件(higher order component)
    11.react性能优化方案
    12.redux介绍一下?
    13.redux的缺点?
    14.redux中间件?
    15.react中组件分为那俩种?
    16.react中函数组件和普通组件的区别?
    17.react中如何打包上传图片文件?
    18.react 按需加载?
    19.react-router?

    以下未整理:
    20.列举重新渲染render的情况
    21.组件绑定和js原生绑定事件哪个先执行
    22.fetch的延时操作
    23.A 组件嵌套 B 组件,生命周期执行顺序
    24.新出来两个钩子函数?和砍掉的will系列有啥区别?
    25.对单向数据流和双向数据绑定的理解,好处?
    26.redux本来是同步的为什么它能执行异步代码(chunk)实现原理是什么 中间件的实现原理是什么
    27.

    React
    一、 有了解过React.js吗?
    React.js 只是一个视图库
      (1)声明式设计
      (2)高效:通过对DOM的模拟,最大限度的减少与DOM的交互。
      (3)灵活:可以与已知的框架或库很好的配合。
      (4)JSX:是js语法的扩展,不一定使用,但建议用。
      (5)组件:构建组件,使代码更容易得到复用,能够很好地应用在大项目的开发中。
      (6)单向响应的数据流:React实现了单向响应的数据流,从而减少了重复代码,这也是解释了它为什么比传统数据绑定更简单。

    1
    ####组件通信
    父子
    父->子 props 通过ref进行标记 就可以将子组件的方法挂载到父组件上 调用子组件的更改方法
    子->父 子组件通过props 获得父组件的修改方法 调用父组件的更改方法 类似于自定义事件
    兄弟
    亲兄弟 进行结合
    1.子组件a调用父组件的方法修改父组件的state 子组件2通过props 获取父组件修改的状态值
    2.子组件a调用父组件的方法 子组件b通过ref 将修改自己state的方法挂载父组件上 由 子组件a进行调用

    2
    • 初始化阶段:
    • getDefaultProps:获取实例的默认属性
    • getInitialState:获取每个实例的初始化状态
    • componentWillMount:组件即将被装载、渲染到页面上
    • render:组件在这里生成虚拟的 DOM 节点
    • componentDidMount:组件真正在被装载之后
    • 运行中状态:
    • componentWillReceiveProps:组件将要接收到属性的时候调用
    • shouldComponentUpdate:组件接受到新属性或者新状态的时候(可以返回 false,接收数据后不更新,阻止 render 调用,后面的函数不会被继续执行了)
    • componentWillUpdate:组件即将更新不能修改属性和状态
    • render:组件重新描绘
    • componentDidUpdate:组件已经更新
    • 销毁阶段:
    • componentWillUnmount:组件即将销毁

    3.
    shouldComponentUpdate这个方法用来判断是否需要调用render方法重新描绘dom。因为dom的描绘非常消耗性能,如果我们能在shouldComponentUpdate方法中能够写出更优化的dom diff算法,可以极大的提高性能。

    虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。
    用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。
    5.
    • 把树形结构按照层级分解,只比较同级元素。
    • 给列表结构的每个单元添加唯一的 key 属性,方便比较。
    • React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)
    • 合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
    • 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
    6.
    Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:
    class CustomForm extends Component {
    handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
    }
    render () {
    return (

    <input
    type=‘text’
    ref={(input) => this.input = input} />
    Submit

    )
    }
    }

    上述代码中的 input 域包含了一个 ref 属性,该属性声明的回调函数会接收 input 对应的 DOM 元素,我们将其绑定到 this 指针以便在其他的类函数中使用。另外值得一提的是,refs 并不是类组件的专属,函数式组件同样能够利用闭包暂存其值:
    function CustomForm ({handleSubmit}) {
    let inputElement
    return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
    <input
    type=‘text’
    ref={(input) => inputElement = input} />
    Submit

    )
    }

    Keys 是 React 用于追踪哪些列表中元素,被修改、被添加或者被移除的辅助标识。
    render () {
    return (


      {this.state.todoItems.map(({item, key}) => {
      return
    • {item}

    • })}

    )
    }
    在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。此外,React 还需要借助 Key 值来判断元素与本地状态的关联关系,因此我们绝不可忽视转换函数中 Key 的重要性。
    8.
    • State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。
    • Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

    在代码中调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。

    高阶组件是一个以组件为参数并返回一个新组件的函数。HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是 Redux 的 connect 函数。除了简单分享工具库和简单的组合,HOC 最好的方式是共享 React 组件之间的行为。如果你发现你在不同的地方写了大量代码来做同一件事时,就应该考虑将代码重构为可重用的 HOC。
    11.

    1. 重写shouldComponentUpdate来避免不必要的dom操作0
    2. 使用 production 版本的react.js0
    3. 使用key来帮助React识别列表中所有子组件的最小变化。

    • redux 是一个应用数据流框架,主要是解决了组件间状态共享的问题,原理是集中式管理,主要有三个核心方法,action,store,reducer,工作流程是 view 调用 store 的 dispatch 接收 action 传入 store,reducer 进行 state 操作,view 通过 store 提供的 getState 获取最新的数据,
    • flux 也是用来进行数据操作的,有四个组成部分 action,dispatch,view,store,工作流程是 view 发出一个 action,派发器接收 action,让 store 进行数据更新,更新完成以后 store 发出 change,view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store,在 Flux 中 dispatcher 被用来传递数据到注册的回调事件,但是在 redux 中只能定义一个可更新状态的 store,redux 把 store 和 Dispatcher 合并,结构更加简单清晰
    • 新增 state,对状态的管理更加明确,通过 redux,流程更加规范了,减少手动编码量,提高了编码效率,同时缺点时当数据更新时有时候组件不需要,但是也要重新绘制,有些影响效率。一般情况下,我们在构建多交互,多数据流的复杂项目应用时才会使用它们

    • 一个组件所需要的数据,必须由父组件传过来,而不能像 flux 中直接从 store 取。
    • 当一个组件相关数据更新时,即使父组件不需要用到这个组件,父组件还是会重新 render,可能会有效率影响,或者需要写复杂的 shouldComponentUpdate 进行判断。

    14.
    中间件提供第三方插件的模式,自定义拦截action一> reducer的过程。变为action一〉 middlewares 一> reducer。这种机制可以让我们改变数据流,实现如异步action, action过滤,日志输出,异常报告等功能。
    常见的中间件:
    redux一logger:提供日志输出
    redux一thunk:处理异步操作
    redux一promise:处理异步操作,actionCreator的返回值是promise

    根据组件的职责通常把组件分为UI组件和容器组件。
    UI组件负责UI的呈现,容器组件负责管理数据和逻辑。
    两者通过React一Redux提供connect方法联系起来。

    • 类组件不仅允许你使用更多额外的功能,如组件自身的状态和生命周期钩子,也能使组件直接访问 store 并维持状态
    • 当组件仅是接收 props,并将组件自身渲染到页面时,该组件就是一个 ‘无状态组件(stateless component)’,可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件

    17.
    为了处理图片上传,我用了 react-dropzone 插件。它包含了一些功能,如拖放文件、文件类型限制和多文件上传。
    首先,安装依赖。在命令行中输入下面的命令,运行:

    1. npm install react react-dropzone superagent --save
      然后在你的组件中导入 React、 react-dropzone 和 superagent。

    Router就是React的一个组件,它并不会被渲染,只是一个创建内部路由规则的配置对象,根据匹配的路由地址展现相应的组件。Route则对路由地址和组件进行绑定,Route具有嵌套功能,表示路由地址的包涵关系,这和组件之间的嵌套并没有直接联系。Route可以向绑定的组件传递7个属性:children,history,location,params,route,routeParams,routes,每个属性都包涵路由的相关的信息。比较常用的有children(以路由的包涵关系为区分的组件),location(包括地址,参数,地址切换方式,key值,hash值)。react-router提供Link标签,这只是对a标签的封装,值得注意的是,点击链接进行的跳转并不是默认的方式,react-router阻止了a标签的默认行为并用pushState进行hash值的转变。切换页面的过程是在点击Link标签或者后退前进按钮时,会先发生url地址的转变,Router监听到地址的改变根据Route的path属性匹配到对应的组件,将state值改成对应的组件并调用setState触发render函数重新渲染dom。
    当页面比较多时,项目就会变得越来越大,尤其对于单页面应用来说,初次渲染的速度就会很慢,这时候就需要按需加载,只有切换到页面的时候才去加载对应的js文件。react配合webpack进行按需加载的方法很简单,Route的component改为getComponent,组件用require.ensure的方式获取,并在webpack中配置chunkFilename

    展示组件(Presentational component)和容器组件(Container component)之间有何不同
    • 展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态。
    • 容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior),它们会调用 Flux actions,并将其作为回调提供给展示组件。容器组件经常是有状态的,因为它们是(其它组件的)数据源。
    类组件(Class component)和函数式组件(Functional component)之间有何不同
    • 类组件不仅允许你使用更多额外的功能,如组件自身的状态和生命周期钩子,也能使组件直接访问 store 并维持状态
    • 当组件仅是接收 props,并将组件自身渲染到页面时,该组件就是一个 ‘无状态组件(stateless component)’,可以使用一个纯函数来创建这样的组件。这种组件也被称为哑组件(dumb components)或展示组件
    何为受控组件(controlled component)
    在 HTML 中,类似 , 和 这样的表单元素会维护自身的状态,并基于用户的输入来更新。当用户提交表单时,前面提到的元素的值将随表单一起被发送。但在 React 中会有些不同,包含表单元素的组件将会在 state 中追踪输入的值,并且每次调用回调函数时,如 onChange 会更新 state,重新渲染组件。一个输入表单元素,它的值通过 React 的这种方式来控制,这样的元素就被称为"受控元素"。
    为什么建议传递给 setState 的参数是一个 callback 而不是一个对象
    因为 this.props 和 this.state 的更新可能是异步的,不能依赖它们的值去计算下一个 state。
    除了在构造函数中绑定 this,还有其它方式吗
    你可以使用属性初始值设定项(property initializers)来正确绑定回调,create-react-app 也是默认支持的。在回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新的回调。
    (在构造函数中)调用 super(props) 的目的是什么
    在 super() 被调用之前,子类是不能使用 this 的,在 ES2015 中,子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
    应该在 React 组件的何处发起 Ajax 请求
    在 React 组件中,应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行,在组件的生命周期中仅会执行一次。更重要的是,你不能保证在组件挂载之前 Ajax 请求已经完成,如果是这样,也就意味着你将尝试在一个未挂载的组件上调用 setState,这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
    描述事件在 React 中的处理方式。
    为了解决跨浏览器兼容性问题,您的 React 中的事件处理程序将传递 SyntheticEvent 的实例,它是 React 的浏览器本机事件的跨浏览器包装器。
    这些 SyntheticEvent 与您习惯的原生事件具有相同的接口,除了它们在所有浏览器中都兼容。有趣的是,React 实际上并没有将事件附加到子节点本身。React 将使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的,这也意味着在更新 DOM 时,React 不需要担心跟踪事件监听器。
    createElement 和 cloneElement 有什么区别?
    React.createElement():JSX 语法就是用 React.createElement()来构建 React 元素的。它接受三个参数,第一个参数可以是一个标签名。如 div、span,或者 React 组件。第二个参数为传入的属性。第三个以及之后的参数,皆作为组件的子组件。
    React.createElement(
    type,
    [props],
    […children]
    )
    React.cloneElement()与 React.createElement()相似,不同的是它传入的第一个参数是一个 React 元素,而不是标签名或组件。新添加的属性会并入原有的属性,传入到返回的新元素中,而就的子元素奖杯替换。
    React.cloneElement(
    element,
    [props],
    […children]
    )
    React 中有三种构建组件的方式
    React.createClass()、ES6 class 和无状态函数。
    react 组件的划分业务组件技术组件?
    • 根据组件的职责通常把组件分为 UI 组件和容器组件。
    • UI 组件负责 UI 的呈现,容器组件负责管理数据和逻辑。
    • 两者通过 React-Redux 提供 connect 方法联系起来。
    简述 flux 思想
    Flux 的最大特点,就是数据的"单向流动"。

    1. 用户访问 View
    2. View 发出用户的 Action
    3. Dispatcher 收到 Action,要求 Store 进行相应的更新
    4. Store 更新后,发出一个"change"事件
    5. View 收到"change"事件后,更新页面
    展开全文
  • Each record in table should have a unique key prop,or set rowKey to an unique primary key. 在使用antd的Table组件时,常常后台返回的数据中不带有key参数,那就需要我们来自己添加,不然会报这个错误,官方给...
  • React常见问题集锦

    2017-08-08 10:15:34
    1.React setState延迟delay导致数据更新不及时,代码无法正确执行
  • React常见问题记录

    2017-06-16 18:10:27
    以下有些是配合materialUI使用时出现的情况 ...可以使用react-throttle插件设置input组件的延迟响应,已解决通过onchange去setState的场景. 用 setState触发页面刷新,不要使用this.state=xxx赋值. r
  • React常见问题

    2019-06-13 00:00:55
    1. 为什么选择React 2.JavaScript 中如何写JSX?浏览器是如何识别它? JSX 只是一种 Facebook 普及的标记语法,可以在Javascript中直接书写html,而不用一个的DOM对象。采用JSX,就会有一个编译的过程。将HTML写的...
  • 关于 React 常见问题链接集合
  • react常见问题解析

    2017-07-17 10:35:50
    1、React 中 Element 与 Component 的区别是?官网文档对于Element的解释是:Elements are the smallest building blocks of React apps.An element describes what you want to see on the screen:官网对于Compent...
  • 原文地址:...这是一份非常实用的,一步步解决 React 性能问题的清单。 你想不想让你的 React 应用程序运行更快? 想不想有一份清单来检查常见React...
  • react 常见问题备忘

    2017-11-27 18:35:02
    react 生命周期 当调用 setState 的时候,发生了什么事? react 中 Element 和 Component 有何区别? 什么时候使用功能组件(Class Component)和 (Functional Component) React 的 ref 是什么,如何使用? React ...
  • react 自定义组件时报如上错误,原因是构造函数里缺少state,只要在constructor里面加上 this.state={ } 就好了。 import React,{Component} from 'react' class myData extends Component{ constructor(props){ ...
  • React 常见的面试题

    2017-04-11 15:57:03
    根据记录,问这些问题可能不是深入了解他们在使用 React 方面的经验的最佳方式。http://www.tuicool.com/articles/fqaqqmF 之所以标题是《 React 常见的面试题》,其实只是想起一个比《在 React 里面,你可以知道也...
  • 1. React16的周期函数 React16新的生命周期弃用了 componentWillMount、componentWillReceivePorps,componentWillUpdate新增了 getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数。...
  • 使用React 开发web app的过程中,总会有踩坑的时候,针对常见的各种异常提示,作以下汇总,以便帮助大家避免少踩坑汇总中会有相关对应的错误异常栗子用法 1. Uncaught TypeError: Cannot read property xxx of ...
  • react常见面试题

    2018-09-26 21:34:15
    1、redux中间件 中间件提供第三方插件的模式,自定义拦截 action -&gt; reducer 的过程。变为 action -&gt;...常见的中间件: redux-logger:提供日志输出 redux-thunk:处理异步操作 ...
  • 在这篇文章里,我们来探索下 React Hooks 的常见问题,以及怎么来避免这些问题。 React Hooks是在2018年10月提出,并且在2019年2月发布。自从 React Hooks 发布以后,很多开发者都在项目中使用了Hooks,因为Hooks...
  • React 面试问题解析

    2020-05-21 09:46:21
    本文收集了 React 面试中最常见的 50 大问题,这是一份理想的指南,让你为 React 相关的面试做好充分的准备工作。首先我们快速了解一下 React 在市场上的需求和现状,然后再开始讨论 React 面试问题。 JavaScript ...
1 2 3 4 5 ... 20
收藏数 25,632
精华内容 10,252
关键字:

react常见问题