react细节

拼搏现实的明天。 2022-11-25 04:04 144阅读 0赞

setStsate  
注意的是这个方法接收两个参数，第一个是上一次的state, 第二个是props setState是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数

this.setState((prevState, props) => \{ return \{ isLiked: !prevState.isLiked \} \}, () => \{ console.log(‘回调里的’,this.state.isLiked) \}) console.log(‘setState外部的’,this.state.isLiked)

// 注意这里是两个下下划线 \_\_html  
dangerouslySetInnerHTML=\{ \{\_\_html: this.state.content\}\}

事件this  
//这其实与 JavaScript 函数工作原理有关。通常情况下，如果你没有在方法后面添加 ()，  
//例如 onClick=\{this.handleClick\}，你应该为这个方法绑定 this。  
constructor(props) \{  
super(props);  
this.state = \{isToggleOn: true\};

// 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);

\}  
render() \{  
return (

// 此语法确保 `handleClick` 内的 `this` 已被绑定。  
// 注意: 这是 *实验性* 语法。  
handleClick = () => \{  
console.log(‘this is:’, this);  
\}

//回调中使用箭头函数：  
// 此语法确保 `handleClick` 内的 `this` 已被绑定。  
return (  
<button onClick=\{(e) => this.handleClick(e)\}>

//此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

<button onClick=\{(e) => this.deleteRow(id, e)\}>Delete Row  
<button onClick=\{this.deleteRow.bind(this, id)\}>Delete Row  
上述两种方式是等价的，分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。  
React Hooks  
const \[count, setCount\] = useState(0); return (

你点击了\{count\}次

<button onClick=\{() => setCount(count + 1)\}>点击