2024年最新【前台学习】React框架学习_setcontractstatusarr react，跳槽薪资翻倍

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

//类
<script type="text/babel">
    class MyCom extends React.Component {
        constructor(props){
          	super(props);
            this.states{}
        }
        render() {
            return (
                <div> 我是一个组件</div >
            )
        }
    }
    let dom = <MyCom />
    ReactDOM.render(dom, document.getElementById("example"));
</script>

Props数据传递

1. 组件外部数据对组件进行数据传递
2. 父组件对子组件数据传递

单属性就照常传递

类就是直接拿this.props就行，不用传递

<script type="text/babel">
    function MyCom(props) {
        return (
            <div>我是一个组件{props.text},{props.tip}</div>
        )
    }
    MyCom.defaultProps = {
        tip: <h1>我是默认提示</h1>
    }
    let dom = <MyCom text="传递数据" />
    ReactDOM.render(dom, document.getElementById("example"));
</script>

多属性需要用特殊语法

{…对象} 可以把他的属性展开
​

let obj={
	text: "text",
  num:"num"
}
<MyCom {...obj}/>

综合使用&刷新render

let flag = true;
    function Father(props) {
        return (
            <div onClick={() => { flag = !flag; console.log(flag); render(); }}>
                我是父组件
                {flag == true ? <h1>点击隐藏</h1> : <h1>点击展开</h1>}
                <Son text="传递信息" />
            </div>
        )
    }
    function Son(props) {
        return (
            <div style={{ display: flag ? "block" : "none" }}>我是子组件{props.text}</div>
        )
    }
    function render() {
        ReactDOM.render(Father(), document.getElementById("example"));
    }
    render();

status异步可变参数

props是不可变的对于子类，而status是可变的并且使用this.setStatus可以异步刷新不需要调用render()并且其附属的子类也不用刷新

React高级

路由-基础使用

需要先下载react-route-dom包
下载：cnpm install --save react-route-dom
hashRoute路径 带/#/号的缓存
browserRoute 历史路径

index.js里面引用并且使用以上一个route模式
然后app.js里面直接引用路由组件，通过浏览器访问不同路径就能到不同的组件了

tip:比如有个首页 / 和一些其他页面/other
匹配other 的时候也会匹配/
这时候就需要加属性route上面加exact属性，就全匹配才能;
tip: redirect可以配置重定向，就能设置默认首页了

路由高级组件

以下均基于withRouter
下载： cnpm install --save react-router-dom

withRouter引入主页面app.js
export default组件的时候带上withRouter（app）
此时app.js内部的props就有路由切换组件的三个属性(location match history)

import Home from './components/Home';
import {withRouter,Switch,Route,NavLink,Redirect} from 'react-router-dom';
import A from './components/A';
import B from './components/B';
function App(props) {
    props.history.listen((link)=>{
        console.log(props);
    })
  return (
    <div className="App">
        <div>
            <NavLink to="/a">点我去phone</NavLink>
            <NavLink to="/b">点我去User</NavLink>
        </div>
        <Switch>
            <Route path="/a" component={A}/ >
            <Route path="/b" component={B}/>
            <Route path="/home" component={Home}/>
            <Redirect from="/" to="/home" exact/>
        </Switch>
    </div>
  );
}

export default withRouter(App);

路由跳转[点击，事件]
点击nav或者输入路由能跳转，代码同样可以

<button onClick={ ()=>{props.history.push("/a")}}>点我去a</button>
<button onClick={ ()=>{props.history.push("/b")}}>点我去b</button>
<button onClick={ ()=>{props.history.push("/home")}}>>点我去home</button>

参数传递-路由实现

优点，刷新地址参数仍然在
只能传递字符。且url会携带数据

Route路径改成 /home/:id
navLink改成或者浏览器输入 /home/我是id
最后跳转的页面通过this.props.match.params.id就能获取了
参数传递-query实现

优点：可传递对象大量数据，不可见
缺点：没太大

​

通过query传递参数

<NavLink to={ {pathname: "/User,query: {"name:"小明"}}}>点我去User</NavLink>

通过this.props.location.query.name获取
​

Hook简化有状态组件

之前有状态组件要基础component然后用status来实现
现在用Hook直接useState(需要先引用)来定义状态
其中第一个是状态值，第二参数是状态函数(类似setState)

function A(){

        let [val, setVal] = useState({ name: "aa", pwd: "123" })
        return (
            <div className="App">
                <div>
                    使用数据:{val.name}
                    <button onClick={() => { setVal({ name: "修改" }) }}>点我进行数据的修改</button>
                </div>
            </div>
        )
}

Redux集中管理组件[增删改查]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

1715666542768)]
[外链图片转存中…(img-oP8599S2-1715666542768)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！