react-jsx语法

tips

1. react {true /false null undefined } 会被忽略 NaN 0 会显示…
2. 列表渲染: 数组的 map 方法
3. react 三大核心属性: state props ref
4. 高阶函数: 参数是函数 || 返回值是函数 Promise setInterval 和数组方法 函数柯里化
5. <React.Fragment> <></> 相当于vue 的template
6. 受控组件和非受控的区别在于是否把表单输入定义到state

redux

1. actions dispatch({type: ‘’, data: {}});
2. store 核心
3. reducers 类似 vuex的mutations

状态提升,(放父组件, 一些组件用同一状态)

• 相当于vue的$emit, 触发一个自定义事件,再用它触发父组件的方法

this.props.onClick1()

受控组件: 表单数据是由 React 组件来管理

jsx{}

1. 虚拟dom不用加引号, 直接写<div></div>
2. 插值语法: 用花括号 { } , style={{ fontSize: '18px',color: red; }}
3. 属性: class => className for => htmlFor (label 标签的)
4. 只有根标签
5. 标签必须闭合
6. 组件首字符大写. 如果是小写字母开头, 它会认为是html标签, 如果没有就报错了.
7. 事件小驼峰, onClick = { (e) => this.a(e)  }  // this.a = this.a.bind(this)
8.  箭头函数解决this指向
9. 注释jsx   { /*  */ } vetur自动注释正确了.

拼接字符串 => art-template模板引擎 => 虚拟dom (diff 对比新旧dom树)
虚拟dom 是 js对象模拟dom树, 实现页面的高效更新. diff算法 tree diff component diff element diff

组件(函数和类式组件)

const Hello = <h1> hello</h1>
ReactDOM.render(
    Hello ,
    document.getElementById('root')
函数式编程??? 1. 单一功能, 单一参数, 单一返回值

函数式组件和类式组件

像vue 的data 函数组件又叫无状态组件,类才有状态, 有状态就是复杂组件

prop-types 库 限制prop
function MyComponnet(props) {  // 大驼峰可以用props 
  console.log(this) // undefined babel编译后开启了严格模式
  return (<h1>props.name</h1>)
} 

class A extends React.Component{ // extends 类继承
  
  	static propTypes = {
  	name: PropTypse.string.Required
  }
	static defaultProps = {}; // 加给这个类本身.

	state = {} // 初始化状态

    constructor(props){      
      super(props) // 通常不写构造函数, 如果写的需要传props并调super, 不然这里面的this.props是undeined
      // 绑定函数
    }

	fn =  () => {}  // 事件绑定方法解决
    render() { // 必须的写render 里的this指向组件实例对象
      return ()
    }
	static a = 1; 
	a = 2; // 静态方法和非静态重名
}
ReactDOM.render(<MyComponnet/>, document.getElementById('app'))


1. 解析组件标签, 找到MyComponent
2. 发现是函数定义的, 则调用,然后转换为真实dom
		or  发现是类定义的, n随后new出来该类的实例, 并通过这个实例调用render()
ReactDOM.unmountComponentAtNode(Dom);

state 状态

组件实例核心三大属性: state props refs

seState支持回调
this.setState({ name: 123 }, () => {})
const [imageList, setImageList] = useState([]);

props

给组件传值 及其验证 propTypes

props像形参对于函数一样,传递, state是 局部状态
1. props 组件中用this.props state?


批量传递props;
<MyComponnet {...{ name: 'miller' }} /> // react babel配合可以这样传参, 这里不是解构赋值.

prop校验只在开发的时候有效,不会影响显示效果,只是报错
age={20}
import PropTypes from 'prop-types'

MyComponent.propTypes = {  // 给组件设置属性
    name: PropTypes.string, // 限制字符串 
    age: PropTypes.number,
      name: React.PropTypes.string, // 16版本后, 去掉了,prop-types 库PropTypes
    sex: PropTypes.string.isRequired, 
    speak: PropTypes.func // 限制function
}

prop 默认值
MyComponent.defaultProps = {
    name: '22 '
}

refs

都是用ref标记, ref="a"  // this.refs.name 这样取
react 不再提倡字符串ref,主要是效率问题. 未来可能移除

回调形式的调用次数 更新页面的话会调用两次, 但是通常还是用这种形式
<div ref={ c => this.a = c }></div> // 内联回调和绑定回调的区别就是内联更新的时候, 会调两次
ref = { this.a } // currentNode // 直接放在实例上
a = (c) => { this.a = c}
  
 
myRef = React.createRef() // ref的容器 this.myRef.current获取dom
<div ref = { this.myRef } // 

事件处理

onChange={this.handleChange2} // 这个方法也要写成箭头函数
onChange={(e) => {
  this.handleChange(e)
}}

生命周期

1. shouldComponentUpdate 更新组件的阀门. 返回boolean 不写的话默认返回true
2. componnetWillReveiveProps(props) 第一次render 不触发, 后面才会.
3. 常用的: componentDidMount() 挂载 卸载 渲染

ReactDOM.unmountComponentAtNode(document.getElementById('app')) // 卸载组件

componentWillMount componentWillUpdate  componentWillReceiveProps 三个will不推荐使用, 如果要使用加 UNSAVE_
	异步渲染(这几个生命周期可能会出现比较严重的bug)

新版本的生命周期加了 static getDerivedStateFromProps(props) 替换了 componentWillMount(); 让state 取决props
	getSnatshotBeforeUpdate() 替换了 componentWillUpdate() 快照值

16.8.4  最新 17 
性能优化:

1. 父组件render 子组件也render,性能优化--当数据变化再render

shouldComponentUpdate(nextProps, nextState) {
	if (nextProps.username !== this.props.username) {
		return true
	} else{
		return false
	}
}

React.PureComponent 性能优化,不能和shouldComponentUpdate混用