组件接收参数，通过render渲染视图
State 与 Props 区别
props 是组件对外的接口，state 是组件对内的接口。
主要区别：
- State是可变的，是一组用于反映组件UI变化的状态集合；
- 而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。
在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。
组件提升
当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过 props 将状态数据传递到子组件当中。这样应用当中所有组件的状态数据就能够更方便地同步共享了。像这种将组件的 state 提升到父组件的情形在重构 React 组件时经常会遇到。
this.state = {
squares: Array(9).fill(null) //长度为 9 的空值数组
}
const squares = this.state.squares.slice(); //复制数组
受控组件
在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
你可以将数组传递到 value 属性中，以支持在 select 标签中选择多个选项：
<select multiple={true} value={['B', 'C']}>
在受控组件上指定 value 的 prop 可以防止用户更改输入。如果指定了 value，但输入仍可编辑，则可能是意外地将value 设置为 undefined 或 null。
ReactDOM.render(<input value="hi" />, mountNode); //过1s变为可修改 setTimeout(function() { ReactDOM.render(<input value={null} />, mountNode); }, 1000);
不可变性在React中非常重要
使用新的一份数据替换旧数据。使用 .slice() 方法创建了数组的一个副本修改，而不是修改原数组。
优点：
1.使得复杂的特性更容易实现。撤销恢复功能。
2.跟踪数据的改变。如果发现对象变成了一个新对象，那么我们就可以说对象发生改变了。
3.确定何时重新渲染
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
对象展开语法：...arr
[图片]
函数组件
如果组件只包含一个 render 方法，并且不包含 state，可写成函数组件
这个函数接收 props 作为参数，然后返回需要渲染的元素。
[图片]
concat() 方法可能与你比较熟悉的 push() 方法不太一样，它并不会改变原数组，所以我们推荐使用 concat()。
React 元素被视为 JavaScript 一等公民中的对象（first-class JavaScript objects），因此我们可以把 React 元素在应用程序中当作参数来传递。在 React 中，我们还可以使用 React 元素的数组来渲染多个元素。
key
key 是 React 中一个特殊的保留属性（还有一个是 ref，拥有更高级的特性）。当 React 元素被创建出来的时候，React 会提取出 key 属性，然后把 key 直接存储在返回的元素上。虽然 key 看起来好像是 props 中的一个，但是你不能通过 this.props.key 来获取 key。React 会通过 key 来自动判断哪些组件需要更新。组件是不能访问到它的 key 的。
组件的 key 值并不需要在全局都保证唯一，只需要在当前的同一级元素之前保证唯一即可。
当你创建一个元素时，必须包括一个特殊的 key 属性。
如果你选择不指定显式的 key 值，那么 React 将默认使用索引用作为列表项目的 key 值。
- 一个好的经验法则是：在 map() 方法中的元素需要设置 key 属性。
JSX
1. JSX，是一个 JavaScript 的语法扩展。
const element = <h1>Hello, world!</h1>;
2. 因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。
例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
3. 假如一个标签里面没有内容，你可以使用 /> 来闭合标签，就像 XML 语法一样。
4. JSX 标签里能够包含很多子元素:
const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );
5.Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
const element = ( <h1 className="greeting"> Hello, world! </h1> ); 等同于
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
[图片上传失败...(image-8ef880-1570615257449)]
[图片上传失败...(image-43b7a0-1570615257449)]
渲染
[图片上传失败...(image-d61a84-1570615257449)]
组件名称必须以大写字母开头。
[图片上传失败...(image-ced94c-1570615257449)]
生命周期
挂载（mount）：当组件第一次被渲染到 DOM 中的时候。
卸载（unmount）：当 DOM 中组件被删除的时候。
componentDidMount()：组件渲染后调用
componentWillUnmount()：组件卸载
调用顺序
1.</>传给ReactDOM.render(),调用构造函数
2.调用render()方法
3.组件在DOM中渲染后，调用ComponentDidMount()生命周期方法
4.组件从DOM中被移除，调用componentWillUnmount()生命周期方法
State
1.不可直接修改
this.state.comment = 'hello'; //无效
this.setState({comment: 'hello'}) //ok
构造函数是唯一可以给 this.state 赋值的地方
2.state更新可能是异步的，因此
this.setState({ counter: this.state.counter + this.props.increment, //不可直接动态更新 });
this.setState((state, props) => ({ counter: state.counter + props.increment //函数可 }));
3.state更新会被合并
事件处理
<button onClick={activateLasers}> Activate Lasers </button>
不能通过返回 false 的方式阻止默认行为，必须显式的使用 preventDefault。
传统：
<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> ); }
this
你必须谨慎对待 JSX 回调函数中的 this，在 JavaScript 中，class 的方法默认不会绑定 this。如果你忘记绑定 this.handleClick 并把它传入了 onClick，当你调用这个函数的时候 this 的值为 undefined。
1.为了在回调中使用 this，构造函数中这个绑定是必不可少的 this.handleClick = this.handleClick.bind(this);
2.class fields 语法：
class LoggingButton extends React.Component { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 // 注意: 这是 *实验性* 语法。 handleClick = () => { console.log('this is:', this); } render() { return ( <button onClick={this.handleClick}> Click me </button> ); } }
3.箭头函数
class LoggingButton extends React.Component { handleClick() { console.log('this is:', this); } render() { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 return ( <button onClick={(e) => this.handleClick(e)}> Click me </button> ); } }
事件处理函数传递参数：
1.箭头函数，显式传递
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
2.Function.prototype.bind ，隐式传递 <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
条件渲染
与运算：true && expression 总是会返回 expression, 而 false && expression 总是会返回 false
[图片上传失败...(image-1c1f41-1570615257449)]
三目运算：
[图片上传失败...(image-fb2b29-1570615257449)]
[图片上传失败...(image-33f538-1570615257449)]
currentTarget始终是监听事件者，即 直接调用addEventlistener那个节点
而target是事件的真正发出者， 即 触发事件的节点，在click事件中就是被点击的节点。
文件input标签
在 HTML 中，<input type=“file”> 允许用户从存储设备中选择一个或多个文件，将其上传到服务器，或通过使用 JavaScript 的 File API 进行控制。
<input type="file" />
因为它的 value 只读，所以它是 React 中的一个非受控组件。
this.setState({ [name]: value //ES6计算属性 });
包含关系
[图片上传失败...(image-76d0ea-1570615257449)]
[图片上传失败...(image-45a288-1570615257449)]
props.children
[图片上传失败...(image-5c383-1570615257449)]
特殊关系
[图片上传失败...(image-2a35c4-1570615257448)]
1.设计稿分解出组件层级
2.静态页面（这些组件目前只需提供 render() 方法用于渲染）
可以自上而下或者自下而上构建应用：
自上而下意味着首先编写层级较高的组件（应用比较简单时）
自下而上意味着从最基本的组件开始编写（较为大型的项目，为低层组件编写测试）
3.确定UIstate的最小（且完整）表示
找出应用所需的 state 的最小表示，保留应用所需的可变 state 的最小集合，其他数据均由它们计算产生。
1）整理需要用到哪些数据
2）通过问自己以下三个问题，你可以逐个检查相应数据是否属于 state：
该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。
4.确定state位置
5.添加反向数据流：处于较低层级的表单组件更新较高层级的组件中的 state。
虚拟DOM：虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。
网友评论