react小记/基本语法/reactjs整理(持续更新)

目录

一、基本语法

二、一些踩坑

1. react-router v5和v6 的一些区别

---

一、基本语法

1. react依赖三个库

        react包含react所有核心代码

        react-dom渲染在不同平台的代码

        babel将jsx转成react代码工具

2. 官方文档React – A JavaScript library for building user interfaces

3. 在script中需要加上type="text/babel"，写jsx

4. 写在标签内的语法，<div>{title}</div>

5. 写在标签内的点击事件语法，<div onClick={btnClick}></div>

6. render函数里面只有一个根标签

7. 在jsx中，null， undefined，false/true(boolean类型)，不显示，转化为空渲染在dom上，对以上类型进行转换可显示

8. 注释语法，{/*我是注释*/}

9. 在jsx中，不能将对象类型进行直接写在标签上，会报错

10. 单标签必须加/

11. 其他标签属性语法，<img src={this.state.url} />

12. 绑定class名字语法，className，<div className={"abc"  + (boo ? "abc1" : "abc2")}></div>

13. 绑定style语法，red: "red"  <div style={{color: red, fontSize: "12px"}}></div>

14. 点击事件，react默认传一个event

15. 写法选择,boolean值，当有值显示，无值不显示

不要使用这个，<div>{boo ? "有": null}</div>

尽量使用这个，<div>{boo && "有"}</div>

16. 数组条件渲染案例[1,2,3,4,5,6,7,8,9]，使用filter()和map()，截取采用clice()，累加reduce()

<div>
    {
        this.state.arr.filter(item => item % 2 === 0).map(i => <div>{i}</div>)
    }
</div>

17. 在jsx中，标签区分大小写，如<DIV></DIV>报错

18. 在类里面定义的叫方法，在别的地方定义的叫函数，有点区别，有时候能拿到this的叫方法

//基本dom
<div id="app"></div>

// 三个库引入

// 写react
<script type="text/babel">
    class App extends React.Component {
        constructor() {
            super()
            this.state = {
                message: "hello world",
                arr: [1, 2, 3, 4, 5],
                counter: 0
            }
            this.test2 = this.test2.bind(this)
        }
        
        render() {
            const domArr = []
            for (let value of this.state.arr) {
                domArr.push(<div>{value}</div>)
            }
            return (
                <div>
                    {this.state.message}
                    {/*方法一*/}
                    {domArr}
                    {/*方法二*/}
                    {
                        this.state.arr.map(item => {
                            return (<div>{item}</div>)
                        })
                    }
                    <div>计数器：{this.state.counter}</div>
                    {/*写法一*/}
                    <div onClick={this.increment.bind(this)}>+<div>
                    {/*写法二*/}
                    <div onClick={this.decrement)}>-<div>
                    {/*写法三*/}
                    <div onClick={() => {this.test()}>测试写法<div>
                    {/*写法四*/}
                    <div onClick={this.test2}>测试写法2<div>    
                </div>
            )
        }
        
        // 加一
        increment() {
            this.setState({
                counter: this.state.counter + 1
            })
        }
        // 减一
        increment = () => {
            this.setState({
                counter: this.state.counter + 1
            })
        }
        // 测试写法
        test() {
            console.log(this.state.counter)
        }
        // 测试写法2
        test2() {
            console.log(this.state.counter)
        }
    }

ReactDOM.render(<App/>, document.getElementById("app"))
</script>

二、一些踩坑

1. react-router v5和v6 的一些区别

1.1 v6用Routes代替Switch

1.2 v6废弃了useHistory，用useNavigate