Fork me on GitHub

react学习总结

我的react爬坑笔记

1. 使用create-react-app执行npm run build时页面空白

1
2
3
// 解决方案
在package.json内增加如下字段
"homepage": "./"

2. 插值符号内不能使用引用类型,否则会报错

3. render方法里return之前和return的数据时机不一样,并且return内必须返回一个闭合标签

1
2
3
4
5
6
render(){
// 此时a获取的是初始化的数据,而不是更改后的数据
let a = this.a;
// return内的a是componentDidMount后的数据
return (<div>不能为对象等引用类型{a}</div>)
}

4. html字符串转译为html

1
2
3
4
5
<div
id={"List_AD" + this.datas.jsId}
class="js-ad"
dangerouslySetInnerHTML={{ __html: this.datas.jsCode }}>
</div>

5. react中对循环的子元素加key可以防止刷新整个dom

6. 移动端输入出现时字体放大的原因:css3媒介查询判断为横屏,使用了横屏的样式

7. State和事件处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 正确使用state
//状态更新可能是异步的
// React 可以将多个setState() 调用合并成一个调用来提高性能。
// 因为 this.props 和 this.state 可能是异步更新的,你不应该依靠它们的值来计算下一个状态。
// 要修复它,请使用第二种形式的 setState() 来接受一个函数而不是一个对象。 该函数将接收先前的状态作为第一个参数,将此次更新被应用时的props做为第二个参数:

// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));

// 事件处理
// 你必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
// 如果使用 bind 让你很烦,这里有两种方式可以解决。如果你正在使用实验性的属性初始化器语法,你可以使用属性初始化器来正确的绑定回调函数:
class LoggingButton extends React.Component {
// This syntax ensures `this` is bound within handleClick.
// Warning: this is *experimental* syntax.
handleClick = () => {
console.log('this is:', this);
}

render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}

//向事件处理程序传递参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
// 上面两个例子中,参数 e 作为 React 事件对象将会被作为第二个参数进行传递。通过箭头函数的方式,事件对象必须显式的进行传递,但是通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。

// 值得注意的是,通过 bind 方式向监听函数传参,在类组件中定义的监听函数,事件对象 e 要排在所传递参数的后面,例如:
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
}

8.列表渲染

1
2
// Keys
// Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识

9.表单

1
2
3
4
5
6
7
8
9
10
// 多个输入的解决方案
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;

this.setState({
[name]: value
});
}

#10. 组合VS继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// React 具有强大的组合模型,我们建议使用组合而不是继承来复用组件之间的代码。
// 一些组件不能提前知道它们的子组件是什么。这对于 Sidebar 或 Dialog 这类通用容器尤其常见。

// 我们建议这些组件使用 children 属性将子元素直接传递到输出。

function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
// 这样做还允许其他组件通过嵌套 JSX 来传递子组件。
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
Mr XuJiang wechat
欢迎您扫一扫上面的微信二维码,小猪送你啦!
0%