react中文文档
以下文字均为看文档后的笔记
用引号来定义以字符串为值的属性
const element = <div tabIndex="0"></div>;
用大括号来定义以 JavaScript 表达式为值的属性(使用了大括号包裹的 JavaScript 表达式时就不要再到外面套引号了。因为JSX 会将引号当中的内容识别为字符串而不是表达式)
const element = <img src={user.avatarUrl}></img>;
JSX使用 camelCase 小驼峰命名 来定义属性的名称
JSX所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS攻击。
Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。
//原先
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
//转换后
const element = React.createElement(
'h1',//第一个是tagname
{className: 'greeting'},//第二个是属性，如果没有则为null
'Hello, world!'//第三个是内容即children,如果是嵌套的就会在这里循环下去
);
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的,更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法
React 只会更新必要的部分,React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分
functional component和class component
当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。
const element = <Welcome name="Sara" />;
//这段中 name='Sara' 会作为参数即props：{name：'Sara'}传入Welcome并调用Welcome
组件名称必须以大写字母开头
组件嵌套时，顶部的组件返回值只能有一个根元素
State是组件自己私有的属性，所以不同于props不能改变，可以通过调用setState()来改变state
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({ //setState()是唯一可以改变state的入口
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
数据自顶向下流动，组件可以选择将其状态作为属性传递给其子组件，但是子组件无法知道其来源
<FormattedDate date={this.state.date} />
function FormattedDate(props) {
return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}
在React中必须明确的使用 preventDefault 来阻止默认行为,不能使用返回false来阻止
class Clock extends React.Component {
render(){
return (
<div>
<a href="baidu.com" onClick={abc}>百度首页</a>
<h1>Hello, world!</h1>
</div>
);
}
}
function abc(e){
e.preventDefault()
console.log('The link was clicked.')
//return false //这段会无效，页面依旧跳转
}
reactDom.render(
<Clock/>,
document.getElementById('root')
)
通过 bind 方式向监听函数传参，在类组件中定义的监听函数，事件对象 e 要排在所传递参数的后面
fn(name,e){}
受控组件，在React中，可变的状态通常保存在组件的状态属性中，并且只能用setState() 方法进行更新.
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
//input的value存储在state中，改变时调用setState，
在React中，<textarea>会用value属性来代替，用法类似input.
<textarea value={this.state.value} onChange={this.handleChange} />
select标签的selected是由select标签上的value属性置顶，而不是option
constructor(props) {
super(props);
this.state = {value: 'coconut'};
-------
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
以上三种都十分类似，都是通过传入一个value属性来实现对组件的控制。
当你有处理多个受控的input元素时，你可以通过给每个元素添加一个name属性，来让处理函数根据 event.target.name的值来选择做什么。
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
//效果类似过滤
状态提升，遇到几个组件需要共用状态数据的情况。这种情况下，将这部分共享的状态提升至他们最近的父组件当中进行管理，即其中一个子组件变化时另一个子组件也会变，与之前不同的是,子组件的props将由父组件提供，包括change的方法，因为change是父组件的方法所以可以改变父组件的state，从而影响子组件
在应用中应保持自上而下的数据流，而不是尝试在不同组件中同步状态。
React 具有强大的组合模型，我们建议使用组合而不是继承来复用组件之间的代码。
JSX 标签内的任何内容都将通过 children 属性传入组件。由于组件在一个 <div> 内渲染了 {props.children}，所以被传递的所有元素都会出现在最终输出中。属性不限于children，也可以是自己约定的属性
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
这时 children属性为
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
在较为简单的例子中，通常自顶向下更容易，而在较大的项目中，自底向上会更容易并且在你构建的时候有利于编写测试
react key概述
react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的（例如你为一个组件设置key之后不能获取组件的这个key props），而是给react自己用的。
简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建
users: [
{id:1,name: '张三'},
{id:2, name: '李四'},
{id: 2, name: "王五"}
]
比如这样的数据中，王五不会被渲染，主要是因为react根据key认为李四和王五是同一个组件，导致第一个被渲染，后续的会被丢弃掉。
key不是用来提升react的性能的，不过用好key对性能是有帮助的的。
参考资料
React之key详解
大写开头的 JSX 标签表示一个 React 组件。这些标签将会被编译为同名变量并被引用，所以如果你使用了 <Foo /> 表达式，则必须在作用域中先声明 Foo 变量。
React 会将小写开头的标签名认为是 HTML 原生标签
你不能使用表达式来直接作为 React 元素的标签
const components = {
photo: PhotoStory,
video: VideoStory
};
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
//比如这样先赋值给SpecificStory这样的大写开头的变量
if 语句和 for 循环在 JavaScript 中不是表达式，因此它们不能直接在 JSX 中使用，但是你可以将它们放在周围的代码中。
<MyComponent foo={1 + 2 + 3 + 4} />
function NumberDescriber(props) {
let description;
if (props.number % 2 == 0) {
description = <strong>even</strong>;
} else {
description = <i>odd</i>;
}
return <div>{props.number} is an {description} number</div>;
}
你可以将字符串常量作为属性值传递,react不会对其进行HTML转义
<MyComponent message={'hello world'} />
React 组件也可以通过数组的形式返回多个元素,会按顺序渲染
false、null、undefined 和 true 都是有效的子代，但它们不会直接被渲染。下面的表达式是等价的：
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
JavaScript 中的一些“falsy” 值(比如数字0)，它们依然会被渲染
<div>
{props.messages.length &&
<MessageList messages={props.messages} />
}
</div>
//当props.messages为空数组时，会打印0
要解决这个问题，请确保 && 前面的表达式始终为布尔值
<div>
{props.messages.length > 0 &&
<MessageList messages={props.messages} />
}
</div>
