react萌新的讀書筆記(一)
阿新 • • 發佈:2020-08-19
書的地址
連結: 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 (<> <MarginTop setNum={this.setNum}/> </>) } }
子元件
class MarginTop extends Component { constructor(props) { super(props); } onChangesOne =()=>{ this.props.setNum('cccc') }; render() { return <> <button onClick={this.onChangesOne}>Click</button> </> } }
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 <><h1>First--{num+a}</h1></> } }
箭頭函式的方式
<MyButton disabled={false} test={'xxxx'}/>
const MyButton = ({disabled, test}) => {
return <button disabled={disabled}>{test}</button>
}
模擬父傳子的請求
父
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 (<>
<MyButton disabled={false} test={arr}/>
</>)
}
}
const MyButton = ({test}) => {
return (<>
<ul>
{test.map((val,i)=>{
return <li key={i}>{val}</li>
})}
</ul>
</>)
}
插槽
父
<TestTwo>
<TestTen/>
</TestTwo>
子
export default class TestTwo extends Component{
constructor(props) {
super(props);
}
componentDidMount() {
console.log(this.props.children);
}
render(){
return (<div>
two
{this.props.children} // 會把TestTen 放在這裡
</div>)
}
}
如果想調整順序
<TestTwo>
<TestTen/>
<TestConfig />
</TestTwo>
========
<div>
{this.props.children[0]}
two
{this.props.children[1]}
</div>
另一種方式的插槽
父
<TestTwo>
<TestTwo.First/>
</TestTwo>
子
class First extends Component{
render(){
return <><h1>First</h1></>
}
}
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 新增節點
<Fragment> {this.props.children[0]} two {this.props.children[1]} </Fragment>) 短語法 <> 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 <>
<h1>TestThree</h1>
<ThemeContext.Provider value={{
foo:'bar',
baz:'blah'
}}>
<TestTwo/>
</ThemeContext.Provider>
</>
}
}
// 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 <>
<h1>TestTwo</h1>
</>
}
}
// 箭頭函式版
const Four=(props)=>{
return (<ThemeContext.Consumer className="Consumer">
{({foo,baz})=>{
return (<h1>{foo}---{baz}</h1>)
}}
</ThemeContext.Consumer>)
}
// 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 (<>
<input type="text" value={age}
onChange={e => setAge(e.target.value)}
/>
{age}
</>)
}
把父的狀態和修改都傳給子修改
const Four = (props) => {
const age=useState(10)
return (<>
xxx
<ThemeContext.Provider value={age}>
{age[0]}
<TestTwo />
</ThemeContext.Provider>
</>)
}
子
export default class TestTwo extends Component {
constructor(props) {
super(props);
}
static contextType=ThemeContext;
componentDidMount() {
}
render() {
const [value,setValue]=this.context;
return <>
<h1>{value}</h1>
<button onClick={()=>setValue(12)}>修改</button>
</>
}
}
如果是箭頭函式
const Fill=props=>{
const [status,setStatus]=useContext(ThemeContext)
return (<>
{status}
<button onClick={()=>setStatus(111)}>修改</button>
</>)
}
useEffect
清楚訂閱
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// 清除訂閱
subscription.unsubscribe();
};
});
useEffect(
() => {
console.log(1)
},
[props.source],
);
只有當props.source 改變後才會重新建立訂閱