1、组件传参
1.1 父组件–>子组件
父组件中通过子组件的属性传递，子组件通过props接收。
//父组件
class ParentList extends React.Component{
constructor(){
super();
this.state = {
name:"父组件",
age:50
}
}
render(){
return (<div>
<ChildList age={this.state.age} name={this.state.name}/>
</div>)
}
}
//子组件
class ChildList extends React.Component{
render(){
return <h1>{this.props.name}{this.props.age}</h1>
}
}
ReactDOM.render(<ParentList/>,document.getElementById('my'))
1.2 子组件–>父组件
父组件里通过子组件的属性传递一个方法，子组件通过props触发。
class ParentList extends React.Component{
constructor(){
super();
this.state = {
name:"张大爷",
age:60
}
}
handle(e){
this.setState({
name:e.name
})
}
render(){
return (
<div>
<h1>父标签</h1>
<h1>{this.state.name}</h1>
<ChildList name={this.state.name} handleParent={this.handle.bind(this)}/>
</div>
)
}
}
class ChildList extends React.Component{
constructor(props){
super(props);
this.state = {
name:props.name,
age:30
}
}
handleChange(e){
this.setState({
name:e.target.value
})
this.props.handleParent({name:e.target.value})
}
render(){
return (
<div>
<h1>子标签</h1>
<h1>父：{this.props.name}子：{this.state.name}</h1>
<input type="text" value={this.state.name} onChange={(e)=>{this.handleChange(e)}}/>
</div>
)
}
}
ReactDOM.render(<ParentList/>,document.getElementById('my'))
1.3 兄弟组件
通过共同的父组件来达到目的。
class ParentList extends React.Component{
constructor(){
super();
this.state = {
name:"我是父组件"
}
}
change(i){
this.setState({
name:i
})
}
render(){
return (
<div>
<ChildListA name={this.state.name} change={this.change.bind(this)}/>
<ChildListB name={this.state.name}/>
</div>
)
}
}
class ChildListA extends React.Component{
render(){
return (
<div>A组件：<button onClick={()=>{this.props.change('ChildListA')}}>click</button></div>
)
}
}
class ChildListB extends React.Component{
render(){
return (
<div>
B组件：{this.props.name}
</div>
)
}
}
ReactDOM.render(<ParentList/>,document.getElementById('my'))
1.4 父组件—>孙子组件
父组件到子组件到孙子组件。
class ParentList extends React.Component{
constructor(){
super();
this.state = {
name:"老王",
age:50
}
}
change(e){
this.setState({
name:e.target.value
})
}
render(){
return (
<div>
<h1>父标签</h1>
<input type="text" value={this.state.name} onChange={(e)=>{this.change(e)}}/>
<ChildList name={this.state.name}/>
</div>
)
}
}
class ChildList extends React.Component{
render(){
return (
<div>
<h1>子标签</h1>
<h1>{this.props.name}</h1>
<SunList msg={this.props.name}/>
</div>
)
}
}
class SunList extends React.Component{
render(){
return (
<div>
<h1>孙组件</h1>
<h1>{this.props.msg}</h1>
</div>
)
}
}
ReactDOM.render(<ParentList/>,document.getElementById('my'))
2、过滤
react并没有像vue的过滤器的说法。这里要达到过滤的目的，通过自定义函数来实现。
class Hello extends React.Component{
//年龄过滤
ageFilter(age){
if(age >20){
return "都那么老了"
}else{
return "好年轻啊"
}
}
//过滤
numFilter(n){
switch (n) {
case '1':
return "这是1啊"
case '2':
return "这是2啊"
default:
return n;
}
}
render(){
let user = {
name:'lili',
age:18,
n:'1'
}
return (
<div>
<h1>hello,{this.ageFilter(user.age)}</h1>
<h1>hello,{this.numFilter(user.n)}</h1>
</div>
)
}
}
ReactDOM.render(
<div>
<Hello></Hello>
</div>
,document.getElementById('my'))
3、生命周期
class Hello extends React.Component{
constructor(){
super();
this.state = {
opacity:1
}
}
// 生命周期函数
componentDidMount(){
this.timer = setInterval(() => {
var num = this.state.opacity;
num-=.05;
if(num<0.01){
num = 1;
}
this.setState({
opacity:num
})
}, 300);
}
// 生命周期函数
componentWillUnmount(){
clearInterval(this.timer)
}
render(){
var styleName = {
fontSize:"30px",
color:'#f60'
}
return (
<div>
<h1 style={styleName}>Hello</h1>
<h1 style={{opacity:this.state.opacity}}>Hello World</h1>
</div>
)
}
}
ReactDOM.render(
<div>
<Hello></Hello>
</div>
,document.getElementById('my'))
组件的生命周期
1、mounting 已插入真实DOM–挂载
componentWillMount() 组件将要挂载
componentDidMount（） 组件完成挂载
2、updating 正在被重新渲染 – 更新
componentWillReceiveProps() 组件将要接收prop，这个方法在初始化render时不会调用。
shouldComponentUpdate() 返回一个布尔值。在组件接收到新的props或state时被调用。在初始化的时候不会调用。
componentWillUpdate（） 组件将要更新
render() 渲染
componentDidUpdate() 组件完成更新时立即调用。在初始化的时候不会调用。
3、unmounting – 卸载
componentWillUnmount() 组件从DOM中移出的时候立刻调用
4、error handling
componentDidCatch（） 错误处理