React 问题整理

发布时间：2020-12-15 06:32:53 所属栏目：百科来源：网络整理

导读：React 特点 1.声明式设计 ?React采用声明范式，可以轻松描述应用。 2.高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活 ?React可以与已知的库或框架很好地配合。 4.JSX ? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们

React 特点

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

create-react-app 执行慢的解决方法：

在使用create-react-app my-app来创建一个新的React应用，在拉取各种资源时,往往会非常慢,一直卡在那：

fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch

可以看到资源还是使用了 npmjs.org，解决方法是换成淘宝的资源：

$ npm config set registry https//registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
$ npm config get registry
或 npm info express

关于React注释的问题：

1、在标签内部的注释需要花括号

2、在标签外的的注释不能使用花括号

ReactDOM.render(
    /*注释 */
    <h1>孙朝阳 {/*注释*/}</h1>,
    document.getElementById('example')
);

关于React入门容易出错的地方：

如同上面说的，代码中嵌套多个 HTML 标签，需要使用一个标签元素包裹它

1.错误例子：

(
  这是错误的例子</h1>
  <span>假设这里是标题下面的内容</span
  document"example");

2.正确例子：

<section>
    这是正确的例子</h1>
    >
  </section);

组件名不一定是用单标签，也可以是双标签

<HelloMessage /> == <HelloMessage></HelloMessage>

XML 的重点有且仅有一个根标签。

onClick 等事件，与原生 HTML 不同，on 之后第一个字母是大写的！

比如本章实例中，如果将onClick={this.handleClick}换成onclick={this.handleClick}则点击事件不再生效。

render 函数中返回的 html 如果只有一个 html 标签可以直接返回。

例如：

//组件类(首字母大写且只能包含一个顶层标签)
var LinkButton=React.createClass({
    /*这个方法名称是已经定义好的，不能改名称。用于定义初始状态*/
    getInitialState:function(){
        return {redorbluethis.props.defaultColor};
    },
    handleClick: (event) {
        /*state的值发生变化，自动调用this.render方法渲染*/
    .setState({redorblue.state.redorblue=='red'?'blue':});
    
    rendervar color=;
        var style={
            color:color
        }
        return  <h3 style={style}>我是一个组件</h3>;
    }
});

但是如果有元素内嵌，你需要多行展示，则需要return()，否则报错。

例如：

({
/*这个方法名称是已经定义好的，不能改名称。用于定义初始状态*/
getInitialState(){
    };


handleClick{
    

    render={
        color(
        <div>
            >
            <p onClick={.handleClick}>点我切换颜色</p>
        </div>) ;
    });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!