一、在组件中写style的样式表
需要将样式单独提出，并定义一个变量，然后调用
const style01 = {
display:'block'
};
<i style={style01}>
二、JSX和Dom属性
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
JSX语法中，为Dom元素添加属性时：
1、如果属性值是String，则用 引号 引起来。
2、如果属性值是JS表达式，则用 单花括号{ }括起来。
三、State & 生命周期
1、this.setState()
this.setState( Object | Function(prevState, props) )
因为 this.state和 this.props的更新是异步的，所以不能依赖他俩来计算更新state。
//错误写法：依赖this.state 和 this.props来直接改变state。
this.setState({
counter: this.state.counter + this.props.increment,
});
// 正确写法：依赖函数传递当前的state和props来改变state
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
四、事件处理
1、与传统DOM元素的区别
- React事件绑定属性的命名采用驼峰式写法，而不是小写。
- 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)
# 例子：
<button onClick={activateLasers}>
Activate Lasers
</button>
2、阻止默认事件
在 React 中另一个不同是你不能使用返回 false 的方式阻止默认行为。你必须明确的使用 preventDefault。
# 传统JS，return false 来阻止默认行为。
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
# React 写法
function ActionLink() {
function handleClick(e) {
e.preventDefault(); // 阻止默认事件
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
3、JSX 回调函数中 this 的问题
1）、默认你需要使用bind 在constructor(){}，对函数进行this的绑定
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { name: 'Diana' };
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this); // 在constructor中进行this绑定
}
handleClick() {
console.log(this.state.name);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
2）、你还可以这么写
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { name: 'Diana' };
}
/**
* 这种写法可以不用 绑定 this，不过这属于 实验写法。需要配合：
* @babel/plugin-proposal-class-properties 包 来使用。
* 在 .babelrc 中配置：
* {
"plugins": ["@babel/plugin-proposal-class-properties"]
}
*/
handleClick = () => {
console.log(this.state.name);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
3）、可以直接在回调函数中使用
箭头函数。 不建议这么写
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
return (
// 为handleClick函数绑定了this。
<button onClick={
(e) => this.handleClick(e)
}
>
Click me
</button>
);
}
}
但是这样有一个问题：就是这个组件每次被渲染的时候onClick 的回调函数都会被重新渲染，从而导致性能问题，所以不建议这么写。
4、回调函数传参
/**
* 1、通过 bind(this,params,..)方法， evenet 永远被默认放在形参的最后一个
*/
handleClick3 (name, sex, e) {
console.log(e);
alert(`${name} + ${sex}`);
}
<button onClick={this.handleClick3.bind(this, this.state.name, this.state.sex)}>
点我点我！
</button>
/**
* 2、通过 箭头函数方法， evenet 可以被显式传递，随便放那个位置都行
*/
handleClick4 (e, name, sex) {
console.log(e);
alert(`${name} + ${sex}`);
}
<button onClick={ (e) => this.handleClick4(e, this.state.name, this.state.sex) } >
你点我试试！！
</button>
五、条件渲染
六、列表 & Keys
1、Keys
注意key的重要性，便于React识别哪些元素发生了变化。
如果列表可以重新排序，我们不建议使用索引来进行排序，因为这会导致渲染变得很慢。
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
2、DOM 元素 li 升级成 <Li /> 组件后 的key问题
如果把DOM元素抽象成 React组件后，就不能再原来的DOM元素上加key，应该在抽象后的React 组件上加。
# 错误的示例
function ListItem(props) {
const value = props.value;
return (
// 错啦！你不需要在这里指定key:
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
//错啦！元素的key应该在这里指定：
<ListItem value={number} />
);
return (
<ul> {listItems} </ul>
);
}
# 正确的示例
function ListItem(props) {
// 对啦！这里不需要指定key:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 又对啦！key应该在数组的上下文中被指定
<ListItem key={number.toString()}
value={number} />
);
return (
<ul> {listItems} </ul>
);
}
N、便利组件的 key 属性
Keys only make sense in the context of the surrounding array.
所以我们应该把key属性加在循环体中的元素上(可能是具体的标签，也可能是包含了某个标签的组件)。
function ListItem(props) {
const value = props.value;
return (
// 1、虽然最终的结果是若干个<li/>标签，但是<li/>标签并不是直接在循环体中，所以不需要加key。
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 2、虽然这里用到的是包装了<li/>标签的组件，但是它在循环体中，所以需要添加key字段。
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
、可控Form表单
1、submit handler
This form has the default HTML form behavior of browsing to a new page when the user submits the form.
//submit handler,
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
// 阻止form表单默认行为。
event.preventDefault();
}
//form表单
<form onSubmit={this.handleSubmit}>
...
</form>
2、textarea 默认值
< textarea value="React 设置textare默认值的方式"/>
3、select 默认选中项
1、传统HTML的select我们只要在某一个option中添加 selected属性，它就会默认选中。
2、React 只要在 select标签中添加value属性，指定需要默认选中的项。
// 因为在 select中设置了 value="d"，所以<option value="d"/> 默认被选中。
<select value="d">
<option value="">--请选择--</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
4、input框
如果给input框设定了 value 固定值(1、'2'、'')会导致无法输入。
处理方式：要么不设置value，要么设置为：
value={null或 undefined}
、props.children
- String、Expressions、Functions、JSX都可以作为组件的children来传递。
<div>
'我是一个String' //String
{ 1 + 2 + 3 + 4 } // 表达式
// 函数表达式
{(index) => <div key={index}>This is item {index} in the list</div>}
<Children/>
</div>
- Booleans, Null, and Undefined 会被忽略，0 不会被处理成
false(这一点与js不太一样)。
## 示例：
<div>
{bool && <Header />}
<p>你好</p>
</div>
### 1、bool === true/ '0' / [] / {}:
<div>
<Header />
<p>你好</p>
</div>
### 2、bool === fasle/null/undefined :
<div>
<p>你好</p>
</div>
### 3、bool ===0:
<div>
0
<p>你好</p>
</div>
判断数组长度时，不要简写：
someArray.length，这样写：someArray.length > 0
想展示：Booleans, Null, Undefined：String('Booleans / Null / Undefined')
N、React-Router RestFul风格传参
如果 某一个参数加了()，如(/:params1)，那么url中没有/:params1也能匹配到
通过 this.props.routeParams.形参名称 来获取
//路由
<Route path="/getParams/:params0(/:params1)" component={Comp01} />
//页面中的 <a>标签
<a href="/#/getParams/我是一个实参/我是另一个">Restfull 传参</a>
//组件JS中获取参数
<h1>
Hello {this.props.routeParams.params0},and {this.props.routeParams.params1}
</h1>
//请求路径
http://localhost:3000/#/getParams/我是一个实参/我是另一个
// 效果
## Hello 我是一个实参,and 我是另一个
或：
//请求路径
http://localhost:3000/#/getParams/我是一个实参
// 效果
## Hello 我是一个实参,and
