React学习笔记_react学习笔记csdn-CSDN博客

本文链接：https://blog.csdn.net/Her_smile/article/details/79572873

1、React DOM使用camelCase（驼峰命名）属性命名约定，例如：类名应该是 className 在jsx中 tabindex 应该是tabIndex.

2、当使用jsx定义dom元素的时候有两种写法：当只有简单一行的时候：const element = <div>vewevw</div> 否则需要使用括号括起来（注意是圆括号不是花括号）

3、创建组件的的方式：直接使用函数的形式：function 组件名(){}，或者用es6语法：class 组件名称 extends React.Component{}，或者使用React.CreactClass（这个方法比较老了现在一般不实用这个了）

3、当使用组件和道具时道具的所在的标签名必须和定义组件的名字一样。例如：

function Welcome (){}//定义一个组件

<Welcome>//使用组件

始终用大写字母开始组件名称，React将以小写字母开头的组件视为Html DOM标签。例如，<div />表示一个HTML div标签，但<Welcome />表示一个组件。

4、React元素不是真实的 DOM 元素，它仅仅是 js 的普通对象（plain objects），所以也没办法直接调用 DOM 原生的 API

5、当返回React元素的集合时候（即有多个类似html的标签）只能有一个根节点（即最外层只能有一个节点）

6、本地状态（state）：定义为类的组件具有的附加功能仅适用于类（即state） React 里，只需更新组件的 state，然后react将自动根据新的 state 重新渲染用户界面，每次状态修改以后，自动调用 this.render 方法，再次渲染组件。而且只有通过state的构造函数setstate()修改的状态才算有效每次调用setstate()的时候都会把我们提供的对象合并到当前对象

7、当异步更新状态的时候请使用setState((prevState,props)=>({}))接受函数而不是对象的第二种形式第一个参数是当前的state,第二个是当前的props(道具)

8、箭头函数两种常见语法：

			（param1，param2，...，paramN）=> {语句} 
			（param1，param2，...，paramN）=>表达式
			    //只有一个参数名时，括号是可选的：
				（singleParam）=> {语句}
				singleParam => {语句}
			//不带参数的函数的参数列表应该用一对括号写入。
			（）=> {语句}

9、类方法默认没有绑定，在类中创建了事件处理函数，需要绑定到当前的类（以前使用的CreateClass默认绑定了函数的）

绑定事件的三种方法：

1、在constructor中绑定函数

（function.prototype.bind()方法如this.handleClick = this.handleClick.bind(this)）

        2、这样来定义方法（自动绑定）
          handleClick = () => {
          console.log('this is:', this);

}

3、调用时使用箭头函数来调用

<button onClick={(e) => this.handleClick(e)}/>

10、<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

以以上两种方式调用事件的时候如果需要传入react事件参数e 第一种必须显示写入第二种不需要会自动写入

11、条件渲染（即使用条件运算符）

    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>

如段代码中所示 true && expression总是评估expression并false && expression始终评估为false。

12、为了防止组件呈现可以返回null。

13、js中的map（）方法

map()方法创建一个新的数组，其结果是对调用数组中的每个元素调用一个提供的函数

语法：index为索引 arry是被map调用的数组  两个参数都是可选的
var new_array = arr .map（function callback（currentValue [，index [，array]]）{
    //为new_array返回元素
}

14、显示一个列表可以这样显示

const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );

一般如果有多个li ,我们需要为每一个li提供一个唯一的key属性。一个键帮助react识别哪一个item已更改、添加或删除。键应该被赋予数组中的元素，以赋予数组元素一个稳定的身份。

选择键的最佳方式是使用一个字符串，该字符串唯一地标识其兄弟姊妹之间的列表项（注意只需要在该数组里面唯一就行了）。大多数情况下，您会使用数据中的id作为键。一个“key”是一个特殊的字符串属性，您需要在创建元素列表时包含它。即应该保证这个件的唯一性（可以是一个id,可以是当前数组的下标等等，如果数组里面的item的顺序可能改变，不建议使用index,这会对性能造成负面影响并可能导致组件状态的问题）,并且键只对数组有效。

15、提取组件中的key问题：是map（）调用中的元素需要键。而不是重复的子元素都需要一个键

Example: 不正确的写法
function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}
Example: 正确的写法
function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />

  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

键不会传递给组建，如果在组建中需要和键同样的值，明确地将其作为另一个具有不同名称的道具。

例：const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

16、可将表单（<input/>, <textarea/>, 以及<select/>）的 value设置为this.state.value这样表单的值就会随着组件的状态而改变，对于<select/>您可以将一个数组传递到value属性中，允许您在一个select标记中选择多个选项：<select multiple={true} value={['B', 'C']}>

17、状态提升：当多个组件需要共享某个状态的时候，可以创建一个父组件，然后将这个状态提升到父亲组件中来，从父亲组件中以道具的方式传递过来，同时在父亲组件中设置相应的方法用来传递给这些子组建，这些子组建调用父亲组件传递过来的方法修改状态。

18、数据流：如果通过setstate改变状态->触发render 重新渲染