基础入门文档建议直接查看React中文文档，这样能少走很多弯路,基于版本V16.6.0
React中文文档
重点：推荐在 React 中使用 JSX 来描述用户界面。[JSX 简介]
生命周期
1.组件初始化阶段
constructor(props) {
super(props);
this.state = {date: new Date()};
}
super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，供子组件读取(组件中props只读不可变，state可变)。而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。
2.组件的挂载阶段
componentWillMount
1、组件刚经历constructor,初始完数据
2、组件还未进入render，组件还未渲染完成，dom还未渲染
componentDidMount
组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
render
render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染
3.更新阶段
shouldComponentUpdate
此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。
优化：利用shouldComponentUpdate钩子函数优化react性能
shouldComponentUpdate(nextProps,nextState){
if(nextState.msg == this.state.msg){
console.log(132312);
return false;
}else{
return true;
}
}
componentWillReceiveProps
此方法只调用于props引起的组件更新过程中，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render
componentWillUpdate
此方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。
componentDidUpdate
此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state
4.卸载阶段
componentWillUnmount
此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。
父子之间的传递属性
1.不使用redux
父传子
子组件显示父组件传过来的props有两种方式：
1、直接使用
这种方式，父组件改变props后，子组件重新渲染，由于直接使用的props，所以我们不需要做什么就可以正常显示最新的props
class Child extends Component {
render() {
return <div>{this.props.someThings}</div>
}
}
2、转换成自己的state
这种方式，由于我们使用的是state，所以每当父组件每次重新传递props时，我们需要重新处理下，将props转换成自己的state，这里就用到了 componentWillReceiveProps。
class Child extends Component {
constructor(props) {
super(props);
this.state = {
someThings: props.someThings
};
}
componentWillReceiveProps(nextProps) { //只有添加此方法才会更新父页面传过来的参数
this.setState({someThings: nextProps.someThings});
}
render() {
return <div>{this.state.someThings}</div>
}
}
import React, { Component } from 'react';
import Children from './Children';
class Father extends Component {
childs = (txt) => {
console.log(txt)
}
render() {
return (
<div className="box">
<Children name="我是父级传递过来的" childs={this.childs} fun={this.fun}></Children>
</div>
);
}
}
export default Father;
import React, { Component } from 'react';
class Children extends Component{
giveFather=()=>{
const value='你想要传的值'
this.props.childs(value)
}
render(){
let str = "我是子组件内的内容";
return (
<div className="child">
{this.props.name}
<button onClick={this.giveFather}>button</button>
</div>
)
}
}
export default Children;
2.使用redux（状态管理）: redux中文官网
事件处理
绑定this:
class LoggingButton extends React.Component {
handleClick = () => {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
或者
class LoggingButton extends React.Component {
handleClick (val) {
console.log('this is:', this);
}
render() {
return (
<button onClick={this.update.bind(this,{name:'111'})}>
Click me
</button>
);
}
}
通常我们会为事件处理程序传递额外的参数，建议选中bind绑定的方式，第一个参数固定为this,参数 e 作为 React 事件对象将会被作为第二个参数进行传递。
修改state为对象中的某一个属性值
针对state为对象,想要修改对象中某一个值而不修改其他值
import React, { Component } from 'react'
import Child from '../components/index'
export default class index extends Component {
constructor(props){
super(props);
this.state = {
msg:'我是从父组件传过来的18',
json:{
msg:'chen ll',
name:'chen ll'
}
}
}
update(){
let data = Object.assign({}, this.state.json, { msg: '2222' })
this.setState({json: data})
console.log(this.state.json)
}
render() {
return (
<div>
<Child msg={this.state.msg} childs={this.childs}></Child>
{this.state.json.msg}
<button onClick={this.update.bind(this)}>11111111</button>
</div>
)
}
}
组件的隐藏
原理：通过display元素控制
import React, { Component } from 'react'
import Child from '../components/index'
export default class index extends Component {
constructor(props){
super(props);
this.state = {
msg:true,
json:{
msg:'chen ll',
name:'chen ll'
}
}
}
update(){
this.setState(prevState => ({
msg: !prevState.msg
}));
}
render() {
return (
<div>
<Child msg={this.state.msg}></Child>
<button onClick={this.update.bind(this)}>11111111</button>
</div>
)
}
}
Child组件
import React, { Component } from 'react'
export default class index extends Component {
constructor(props){
super(props);
this.state = {
msg : props.msg
}
}
componentWillReceiveProps(nextProps) {
this.setState({msg: nextProps.msg});
}
render() {
return (
<div style={{'display':this.state.msg?'block':'none'}}>
22222222
</div>
)
}
}
网友评论