React——JSX、render机制、state状态、组件定义、参数传递、生命周期

vscode 安装 Reactjs code snippets 代码提示  输入rcc 自己补全

1、for属性  label标签  与js for循环 冲突，需要使用htmlFor

2、class属性  与js保留字class 冲突 ，需要使用className

3、style属性 与js  style={{color:'red'}}  在jsx中只能用对象的方式表示css样式

4、三元运算符列：

<h1 style={name === '小明' ? {color:'green'} : {color:'red'}}>hello world!</h1>

5、循环例子：

{
 arr.map((v,k)=>{
  return <li>{v}</li>
 })
}

6、JSX中执行JS代码：

在es6中执行代码需要加 ${} , 在JSX中执行js不需要加$，且一个{} 中只能执行一行JS语句，可以看上循环的例子

7、注释例子：

{/* 这是一个注释 */}

8、JSX中必须只有一个跟节点，没有不行，多了也不行

9、constructor 里别忘记写super() 实现继承 （es6类的语法）

10、react 是单线程的，只有当setstate 改变了状态，才会重选触发render，从而改变页面

11、类方式引入的组件继承了Component，具有很多方法与属性（setstate)，函数方式不具有，只能做展示

12、箭头函数在哪个对象里调用，this就属于哪个对象，可以参照定时器里的this是window，如果是箭头函数就是上级this

13、()=>this.hanleClick()  ？？？？

<button type="button" style={ this.state.like ? { color: "red" } : { color: "black" } }
  onClick={()=>this.hanleClick()}
>
{
 this.state.like ? "已赞" : "喜欢"
 }
</button>

// 注意 在jsx，事件监听的属性为驼峰式命名
// 在jsx中，，事件监听指向一个js函数

//如果在onClick里使用箭头函数，而是直接执行this.hanleClick() ，因为这行代码会被 //react.createElement编译，而失去this作用域，undefined。

解决方案：
1.es6箭头保留作用域 （常用）
onClick={()=>this.hanleClick()}

2.bind绑定this作用域
constructor() {
    this.hanleClick.bind(this)
}

14、state状态

a.  state 只能在组件的constructor 里初始化，必须先 super()
constructor () {
    super()
    this.state = {
      value: ''
    }
  }
b.  state 只能使用setState 方法更新
c.  state 用在render中渲染jsx <p>{this.state.value}</p>
d.  setState 会导致render() 重新执行，渲染组件与子组件(父组件会触发子组件更新，子组件不会触发父组件更新)


this.setState({
				[obj.type]: obj.state
			}, () => {
				console.log('setState success')
			})

// setstate 可以加回调函数

15、props组件间参数传递（class定义的用this.props, function 定义个用props接受一个形参）

import React, { Component } from 'react';

export default class Button extends Component {
  render () {
    console.log('button组件更新')
    return (
      <button>
        {this.props.title}
      </button>
    )
  }
}

const Nav = function (props) {
  console.log(props)
  console.log('Nav组件更新')
  return (
    <div>
      {props.title}
      {props.children}
    </div>
  )
}
export { Nav }

16、状态提升（问题：子组件怎么改变父组件，或者其他组件？？？）

在vue中可以使用vuex 或者 this.$emit 在react中也可以使用状态提升，把相同状态提到父组件上，动态的改变，子组件用props与vue类似，不过react中没有$emit 向上传递事件，可以用方法下发的方式，将父组件的事件让子组件调用

总结：

vue中，改变父元素状态一般通过this.$emit 上升一个事件，在父元素中捕获，然后动态改变父元素的状态，或者用vuex全局状态

react 中，父元素定义一个改变状态的方法，然后把函数传递给子组件（方法下放），子组件调用，改变父元素状态

 

17、生命周期钩子

18、在vue中一般都是在created 后ajax请求数据，在react 一般都是在componentWillMount 或者 componentWillUpdate，具体还要是要看需求来定

19、react有参数的生命周期

20、react 17 生命周期的改变

 

20、条件渲染

{unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }

true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false。

阻止组件渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。

21、循环

 const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识

一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据 id 来作为元素的 key

不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题

 

用 key 提取组件

元素的 key 只有放在就近的数组上下文中才有意义。

比方说，如果你提取 出一个 ListItem 组件，你应该把 key 保留在数组中的这个 <ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上。

一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性

数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值

key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值

23、react 高阶组件（HOC）：

   高阶组件是react中对组件逻辑进行重用的高级技术。但是高阶组件本身并不是React Api 。它只是一种模式，这种模式是由react自身的组合性质必然产生的。

高阶组件是参数为组件，返回值为新组件的函数，是函数。

 

注意： 1、在使用高阶组件时，一定不要修改原始组件的任何地方（值样式和结构）

2、高阶组件和容器组件的相似之处。容器组件时专注于高层次和低层次关注点之间进行责任划分的策略的一部分。容器组件会处理诸如数据订阅和状态管理等事情，并传递props属性给展示组件。而展示组件则负责处理渲染UI等事情。高阶组件使用容器组件作为实现的一部分。你也可以认为高阶组件就是参数变化的容器组件定义。

a、高阶组件抛出函数，而不是组件

b、函数里面抛出组件

c、高阶组件使用时会接受一个组件作为参数传入

d、一般采用state的状态来管理是否到了渲染传入组件的时机

e、如果处理数据、获取数据或其他的数据处理完毕 再渲染传入组件

24、react 没有提供路由钩子函数