React基础学习
React是一个用于构建用户界面的JavaScript库
一、基础知识学习
1. JSX
const element = <h1>hello world<h1>
JSX是一个JavaScript的语法扩展遵循xml和html语法。
可以在JSX中使用表达式：
const name = 'lucy';
const element = <h1>hello {name}</h1>;
ReactDOM.render(
element,
document.getElementById("root")
)
JSX也是一个表达式
可以在if语句和for循环语句的代码块中使用JSX,将JSX赋值给变量，把JSX当做参数传入，以及从函数中返回JSX
var name = "lucy"
function greeting(name){
if(name){
return <h1>Hello, {name}</h1>
}
return <h1>Hello Stranger</h1>
}
JSX特定属性
const element = <div name="lucy"></div>
const element = <img src={user.avatar}></img>
注意：JSX语法上更接近JS，所以React DOM使用小驼峰（cameCase）命名来定义属性的名称，而不使用HTML属性名称的命名约定。
例如，JSX中class变成了ClassName,onclick变成了onClick.
2. 组件
类似于JS函数，接受任意入参（props）,并返回用于描述页面展示内容的React元素。
函数组件
function Welcome(props){
return <h1>Hello {props.name}</h1>
}
class组件
class Welecome extends React.Component{
render(){
return <h1>Hello,{this.props.name}</h1>
}
}
这两个组件在React里是等效的。
注意：组件名称必须大写字母开头（React会将小写字母开头组件视为原生DOM标签）
3. Props
纯函数：函数不会更改入参，且多次调用下相同的入参始终返回相同的结果。
function sum(a,b){
return a+b
}
组件无论如何都不能修改自身props，所有的组件都必须像纯函数一样保护它们的props不被修改。
定义与使用：
function Welcome (props){
return <h1>{props.name}</h1>
}
ReactDOM.render(
<Welcome name="jack"/>,
document.getElementById("root")
)
4. State
State与props类似，但是state是私有的，并且完全受控于当前组件，可以将当前组件state当做子组件的props传递。
定义与使用:
class Welcome extends React.Component{
constructor(props){
super(props);
this.state = {
name:"lucy"
}
}
render(){
return(
<div>
<h1>welcome!!!</h1>
<h1>{this.state.name}</h1>
</div>
)
}
}
ReactDOM.render(
<Welcome/>,
document.getElementById("root")
)
5. setState
React规定不要直接修改State
因此需要使用setState()方法实现修改state
例如，此代码不会重新渲染组件
//假如组建中state为 this.state = {name : "jack"}
this.state.name = "lucy"
而使用setState就可以
this.setState({
name:"lisa"
})
构造函数是唯一可以给this.state赋值的地方。
State的更新可能是是异步的。
因为this.props和this.state可能会异步更新，所以不要依赖他们的值。
//wrong
this.setState({
name:this.state.firstName + this.props.lastName,
})
解决：让setState()接收一个函数而不是一个对象，这个函数用上一个state作为第一个参数，将此次更新被应用时的props作为第二个参数：
//correct
this.setState((state,props)=>{
name:state.firstName + props.lastName
});
setState方式是异步的：
//...假设组件的state = {name:"lisa"},组件上有个按钮点击执行handleClick事件
handleClick(){
this.setState({
name:"lucy"
},()=>{
console.log("setState()执行完毕")
})
console.log('setState()执行之前')
}
setState()方法接收第二个参数，类似于一个回调函数，当数据更新之后才会执行回调里面的方法，上述代码输出顺序为“setState()执行之前”=>“setState()执行完毕”。
关于setState可以参考这篇文章：你真的理解setState吗？
6. 生命周期
组件生命周期三个阶段
- Mounting（加载阶段）
- Updating（更新阶段）
-
Unmounting（卸载阶段）
react生命周期
Mounting阶段执行钩子函数：
- constructor
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
Updating阶段执行钩子函数：
当props发生改变
- compoentWillReceProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
当state发生改变
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
Unmounting阶段执行钩子函数：
- componentWillMount
7. 事件处理
- React事件的命名采用小驼峰式（camelCase），而不是纯小写。
- 使用JSX语法时需要传入一个函数作为事件处理函数，而不是一个字符串。
事件处理函数中的this:
class Toggle extends React.Component {
constructor(props){
super(props)
this.state = {isToggle:true};
}
handleClick(){
this.setState((state)=>({
isToggle:!state.isToggle
}));
}
render(){
return (
<button onClick={this.handleClick}>
{this.state.isToggle ? "ON" : "OFF"}
</button>
)
}
ReactDOM.render(
<Toggle />,
document.getElementById("root")
)
}
此时handleClick中的this指向为undefined，因为this.handleClick传给了button组件后是丢失了this的！如下：
var obj = {
f : function(){
console.log(this)
}
}
function foo(f){
f()
}
foo(obj.f)
个人觉得这个例子很形象，foo运行时接收到的参数 f 时，foo是并不知道 f 是obj的属性，也就是常说的丢失了上下文。
关于React中this指向问题可以参考知乎文章https://www.zhihu.com/question/68092028?sort=created
this指向更正比较主流的有三种，第一种是在调用时绑定:
render(){
return (
<button onClick={this.handleClick.bind(this)}>
{this.state.isToggle ? "ON" : "OFF"}
</button>
)
}
第二种是在constructor中绑定：
constructor(){
this.handleClick = this.handleClick.bind(this);
}
render(){
<button onClick={this.handleClick}>
{this.state.isToggle ? "ON" : "OFF"}
</button>
}
第三种是使用public class fields语法：
handleClick = ()=>{
console.log(this)
}
render(){
return (
<button onClick = {this.handleClick}>
Click me
</button>
)
}
还有一种是在调用的时候直接用一个箭头函数包起来：
render(){
return (
<button onClick = {()=>{this.handleClick()}}>
Click me
</button>
)
}
响事件处理程序中传递参数：
handleClick(id,e){
e.preventDefault();
}
<button onClick = {(e)=>{this.handleClick(id,e)}}>Delete</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete</button>
这两种情况下，React的事件对象e会被作为第二个参数传递，如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过bind的方式，事件对象以及更多的参数将会被隐式的进行传递。
8. 组件通信
父子通信：通过props数据由父组件流向子组件
// Father.js
import React , {Component} from 'react';
import Child from './Child';
export default class Father extends Component {
constructor(){
super()
this.state = {
name:"father",
age:20
}
}
render(){
return(
<div>
{this.state.name}
<div><Child faname={this.state.name}/></div>
</div>
)
}
}
//Child.js
import React ,{ Component } from 'react'
export default class Child extends Component{
constructor(){
super()
this.state = {
name:"Child",
age:10
}
}
render(){
return (
<div>{this.state.name}</div>
)
}
componentWillMount(){
this.setState({
name:this.props.faname
})
}
}
父组件中的state通过给子组件传递属性的方式传递给子组件，子组件可以通过this.props.属性名获取到。
子父通信：通过方法通信（可以理解为回调函数通信），在子组件中触发一个通过props接收的从父组件传递过来的事件，并把子组件的state通过参数传递给事件，这样在父组件的方法中就能获通过参数获取子组件中的state
//Father.js
import React , {Component} from 'react';
import Child from './Child';
export default class Father extends Component {
constructor(){
super()
this.state = {
name:"father",
age:20
}
}
render(){
return(
<div>
{this.state.name}
<div><Child toChildEvent = {this.getChildState.bind(this)}/></div>
</div>
)
}
getChildState(childName){
this.setState({
name:childName
})
}
}
//Child.js
import React ,{ Component } from 'react'
export default class Child extends Component{
constructor(){
super()
this.state = {
name:"Child",
age:10
}
}
render(){
return (
<div>{this.state.name}</div>
)
}
componentWillMount(){
this.props.toChildEvent(this.state.name);
}
}
首先在父组件中定义一个方法，叫做getChildState，然后通过属性绑定给<Child/>组件，属性名为toChildEvent(自定义)，之后在子组件中通过props接收到该toChildEvent属性，也就是getChildState方法，然后在componentWillMount生命周期钩子函数中执行，并传入参数，然后就在父组件中getChildState方法可以通过参数获得子组件中state。
兄弟通信：采用状态提升方案，将兄弟间需要共享的数据，通过子父方法通信传递给最近共同父组件，之后通过父组件再通过props将数据流向各子组件
可以参考官网状态提升
待续。。。。。。
