react萌新的读书笔记(一)

---

书的地址

链接: https://pan.baidu.com/s/1YC0qS2QFJO3yQ-kFt27lBQ 提取码: h2km

子传父

通过方法

父组件

export default class TheOne extends Component {
    constructor(props) {
        super(props);
    }

    setNum(e) {
        console.log(e);
    }
    render() {
        return (<>
            
        )
    }
}

子组件

class MarginTop extends Component {
    constructor(props) {
        super(props);
    }
    onChangesOne =()=>{
        this.props.setNum('cccc')
    };
    render() {
        return <>
            Click
        
    }
}

prop-types 父传子属性限制

子

    static propTypes = {
        age: PropType.number
    }

defaultProps 设置默认值

class First extends Component {
    constructor(props) {
        super(props);
    }

    static defaultProps = {
        num: 1,
        a: 2
    }

    render() {
        let {num,a}=this.props
        return <>
First--{num+a}
    }
}

箭头函数的方式

 

const MyButton = ({disabled, test}) => {
    return {test}
}   

模拟父传子的请求

父
export default class TestTwo extends Component {

    constructor(props) {
            super(props);
            this.state = {
                arr:[]
            }
        }
    fetchDate(){
            return new Promise(res=>setTimeout(()=>{
                res(['a','b','c'])
            },2000))
        }
        componentDidMount() {
            this.fetchDate().then(res=>{
                this.setState({
                    arr:res
                })
            })

        }
     render() {
            let {arr} = this.state
            return (<>
                
            )
        }
}

const MyButton = ({test}) => {
    return (<>
        

            {test.map((val,i)=>{
                return 
{val}
            })}
        
    )
}

插槽

父

子

export default class TestTwo extends Component{
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        console.log(this.props.children);
    }

    render(){
        return (

            two
            {this.props.children} // 会把TestTen 放在这里
        
)
    }
}

如果想调整顺序

 
                
                


========
     

            {this.props.children[0]}
            two
            {this.props.children[1]}
        

另一种方式的插槽

父
 
                
 
子
class First extends Component{
    render(){
        return <>
First
    }
}
export default class TestTwo extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let {first, second} = this.state
        return (<>
          	Two
            {this.props.children}
        )
    }
}

TestTwo.First=First;

Fragment

对子列表分组,无需向DOM 添加节点

            {this.props.children[0]}
            two
            {this.props.children[1]}
 )

短语法
<>
xxxx
    

key 是唯一可以传递给 Fragment 的属性

上下文(Context)

// context.js
import React from 'react'

export default React.createContext({})

//theThree.js
import React, {Component, createContext} from 'react'
import TestTwo from "./TestTwo";
import ThemeContext from './context'


export default class TestThree extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <>
            
TestThree
            
                
            
        
    }
}

// TestTwo
import React, {Component} from 'react'
import ThemeContext from './context'

export default class TestTwo extends Component {
    constructor(props) {
        super(props);
    }
    static contextType=ThemeContext;
    componentDidMount() {
        console.log(this.context);
    }


    render() {
        return <>
            
TestTwo
        
    }
}
// 箭头函数版
const Four=(props)=>{
    return (
        {({foo,baz})=>{
            return (
{foo}---{baz}
)
        }}
    )
}
// hooks 版
const Four = (props) => {
    const count=useContext(ThemeContext)
    useEffect(() => {
        console.log(count);// 拿到值了
    });
    return (<>
        xxx
    )
}

如果跟我一样出现报错了

将createContext调用移动到单独的文件/模块可以解决我们的问题

react-hooks

useState

双向绑定

const Four = (props) => {
    const [age, setAge] = useState('xxx');
    return (<>
         setAge(e.target.value)}
        />
        {age}
    )
}

把父的状态和修改都传给子修改

const Four = (props) => {
    const age=useState(10)
    return (<>
        xxx
        
            {age[0]}
            
        
    )
}
子
export default class TestTwo extends Component {
    constructor(props) {
        super(props);
    }
    static contextType=ThemeContext;
    componentDidMount() {
    }


    render() {
        const [value,setValue]=this.context;
        return <>
            
{value}
            setValue(12)}>修改
        
    }
}
如果是箭头函数
const Fill=props=>{
    const [status,setStatus]=useContext(ThemeContext)
    return (<>
        {status}
        setStatus(111)}>修改
    )
}

useEffect

清楚订阅

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // 清除订阅
    subscription.unsubscribe();
  };
});

useEffect(
  () => {
    console.log(1)
  },
  [props.source],
);

只有当props.source 改变后才会重新创建订阅