写react项目需要注意的

key应该是稳定的，且唯一的，尽量不要用索引作为key

都知道React组件渲染列表时需要为每个列表元素分配一个在列表中独一无二的key，key可以在DOM中的某些元素被增加或删除视乎帮助React识别哪些发生了变化，通常列表数据都会有id字段，习惯用id值作为key，当没有id或其他唯一标识时，也会用序列号索引index作为key，之前并没有觉得用index有什么不好之处，再次看文档发现序列号索引作为key有一些弊端。

如果列表可以重新排序，不建议使用索引作为key，因为会导致渲染变得很慢，如果不重排，没问题。

为什么变得很慢？

React通过对比算法来更新组件，使用key来匹配原本树的子节点和新树的子节点，比如以下列表，在开始插入元素：

<ul>
  <li key='6'>6</li>
  <li key='7'>7</li>
</ul>

<ul>
  <li key='5'>5</li>
  <li key='6'>6</li>
  <li key='7'>7</li>
</ul>

没有使用index作为key，React知道key为'5'的元素是新的，仅移动key为'6'、'7'的元素就可以了。

如果使用index作为key，上述列表的变化会导致key值的变化，列表元素不能复用，造成不必要的重建，也可能会以意想不到的方式更新，所以会变慢。

注意：不要使用不稳定的key（类似Math.random()生成的）

React中布尔值、Null和Undefined被忽略，数字0不会被忽略

React使用条件渲染时，通常用JavaScript的逻辑与&&，当showHeader为true时渲染<Header />，如下：

 <div>
  {showHeader && <Header />}
</div>

但数字0不会像预期的哪样运行，如下：

  <div>
  {props.messages.length &&
    <MessageList messages={props.messages} />
  }
</div>

props.messages为空数组时，仍然会渲染<MessageList />，要解决这个问题，确保 && 前面的表达式始终为布尔值：

  <div>
  {props.messages.length  > 0 &&
    <MessageList messages={props.messages} />
  }
</div>

使用PropTypes进行类型检查是很必要的

最开始写React的时候从来都不加PropTypes，觉得没什么必要，现在发现PropTypes进行类型检查是很必要的，如果父组件传给子组件的参数不符合PropTypes配置，控制台就会报错，给出错误信息，这样可以快速定位问题。

另外通过defaultProps为props定义默认值时，类型检查也会应用在 defaultProps 上面，因为类型检查发生在 defaultProps 赋值之后。

使用说明请查看官方文档：https://doc.react-china.org/docs/typechecking-with-proptypes.html

React中获取真实DOM节点或 React 元素时使用Refs

获取在 render 方法中创建的 DOM 节点或 React 元素时，最好使用“回调 ref”的方式，不要用DOM操作也不要用旧版 API：String 类型的 Refs

 render() {
    return (
        //回调ref
        <input ref={input => this.inputRef = input}/>
        //string类型的ref
        <input ref=“inputRef”/>
    );
  }

不要在函数式组件中使用ref属性来进行回调函数的绑定，因为函数式组件是没有实例的，准确的说函数式组件不是一个真正的类

React.Fragment组件的使用

在React中组件返回多个元素时要被一个元素包裹，不然会报错，我们通常用div元素，这个div元素没有什么实际的意义，并且会在DOM中增加额外节点，建议用React.Fragment组件，不会增加额外的节点，目前key 是唯一可以传递给 Fragment 的属性。

  render() {
    return (
      <React.Fragment>
        <h1>React 文档</h1>
        <div>React内容</div>
      </React.Fragment>
    );
  }

 关于 class 的问题

　　　　在 React 中元素的 class 需要换成 className

　　　　

图片路径的问题

　　　　　　1 . 如果要使用相对路径引入图片有两种方法:( 相对路径用于请求 src 下面的图片)

　　　　　　　　每个组件类中引入图片当使用相对路径的时候，这个图片必须放在src中。

　　　　　　　　　a . 直接在组件类的模板中通过 require("文件的相对路径") 引入

 <img src={require("../images/01.jpg")} alt="图片"/>

　　　　　　　　 b . 通过定义图片,在模板中调用

// 引入并定义图片
import pic from './images/01.jpg';  

// 在模板中使用
 <div className="App">
          <img src={pic} alt="图片"/>
</div>

　　　　　　2 . 如果在 public 中放了一张图片，我们会发现在地址栏上输 http://localhost:3000/01.jpg 能找到图片,说明 React 把 public 当做该项目的 web 容器。 所以,以后做项目时静态资源放在 public 中。

　　　　　　因此,我们的 ajax 请求和 钩子函数 的路径就相对于 index.html , 下面是 ajax请求本地文件 aa.txt 实例

import React, { Component } from 'react';
//  npm install axios  下载并引入 axios
import axios from "axios";
//   创建类组件 组件类的创建方法
//　　　　第一 React.createClass()  最开始的
//　　　　第二 class Heads extend Component{}
//　　　　第三 构造函数

class Slide extends Component {
    constructor(props){ // 在该组件类的标签中设置 props 值,这里设置的是 title
        super(props);
        this.state={  // 设置state
            url:"http://localhost:3000/images/01.jpg"
        }
    }
    render() {
        return (
            <div className="slide">
                <div>
                    <img src={this.state.url} alt="图片"/>
                </div>
            </div>
        );
    }
    componentDidMount(){
        axios.get(this.props.title)
        .then(function (res) {
            console.log(res.data);
            this.setState({
                "url":res.data
            })
        }.bind(this))
        .catch(function (err) {
            console.log(err);
        })
    }
}
export default Slide;

　　　　　上面组件中设置 props 值

// title 与上面组件中的值对应
<Slide title="http://localhost:3000/txt/aa.txt"/>

. 事件 

　　　　　　　　事件通常和 this  有关,下面是关于事件的例子

import React, { Component } from 'react';

class Heads extends Component {    //创建组建类
    constructor(){
        super()
        this.state={
            title:"welcom to China"
        }
        this.fn=this.fn.bind(this)
    }
  fn(){
//    事件往往和this有关
    this.setState({
        title:"Hello world!"
    })
  }
  render() {
    return (
      <div className="Heads">
           <h3 onClick={this.fn}>
               {this.state.title}
           </h3>
      </div>
    );
  }
}

export default Heads;