npm i react-bootstrap npm i @mui/material
proau Updated
I started
se-a11gh Updated
create components set layout connect components with react router testing
MaxwellHouston Updated
Jani ye wala code mujy be samja dena yr
rizwanullah313 Updated
事件处理 小驼峰命名,例如: <button onClick={handleClick}></button> 阻止默认行为,必须显示的调用preventDefault function handleClick(e) { // react中的e是合成事件,不需要我们担心跨浏览器兼容的问题 e.preventDefault() //... } this绑定 class MyComponent extends React.Component { constructor(props) { super(props) this.state = { isToggleOn: true } // 方法一:手动绑定 this.handleClick = this.handleClick.bind(this) } // class中的方法默认不会绑定this handleClick() { this.setState((state) => ({ isToggleOn: !state.isToggleOn })) } // 方法二:使用public class fields语法 handleClick = () => { this.setState((state) => ({ isToggleOn: !state.isToggleOn })) } render() { return ( // 如果直接使用没有绑定this的handleClick,handleClick中的this为undefined <button onClick={this.handleClick}></button> // 方法三:此方法在每次渲染(调用render函数)的时候,都会创建一个新的函数,如果被当做prop传给子组件,子组件可能会进行额外的渲染,容易导致性能问题 <myButton onClick={() => this.handleClick()}></myButton> ) } } 参数传递 // 事件对象e通常作为函数的第二个参数传递 // 箭头函数中的e需要显示的传递 <button onClick={(e) => this.handleClick(id, e)}></button> // bind方式,e被隐式的传递,不应该在jsx中使用bind,bind也会返回一个新函数 <button onClick={this.handleClick.bind(this, id)}></button> 条件渲染 if语句 在jsx中,通过花括号{}包裹代码,可以在里面嵌入任何表达式: && 三目运算 render函数返回null阻止组件渲染 列表 & key key不会当做prop传入子组件,只有react内部才会使用到key 表单 受控组件:指被react控制取值和输入的表单元素,react中state是唯一数据源,并且只能通过setState更新 <input type="text" value={this.state.value} onChange={this.handleChange} /> <select value={this.state.value} onChange={this.handleChange}> <option>...</option> </select> // 多选,value为数组 <select multiple={true} value={['a', 'b']} onChange={this.handleChange}> <option>...</option> </select> 非受控组件 // 允许用户从本地选择一个或者多个文件,value是只读的,且只能有用户主动发起读取文件的行为 <input type="file" /> 处理表单:Formik 状态提升 多个子组件状态需要共享时,可以将状态提升至共同的父组件中 组合 特殊的prop:children,类似vue的默认插槽 react组件的prop可以是任意数据,包含事件,react元素等 组合:将组件A写入组件B的内容中,B包裹A,B将组件A的内容通过prop.children传入,类似vue插槽 使用场景:底层组件需要从顶层组件获取数据,中间层次不关心这些数据,为了避免需要一层层传递这些数据,将底层组件放在顶层组件中创建,使用顶层组件的作用域,并把底层组件当做prop传递下去 function Page(props) { const userLink = ( <Link href={user.permalink}> <Avatar user={props.user} size={props.avatarSize} /> </Link> ) return <PageLayout userLink={userLink} /> } // 现在,我们有这样的组件: <Page user={user} avatarSize={avatarSize} /> // ... 渲染出 ... <PageLayout userLink={...} /> // ... 渲染出 ... <NavigationBar userLink={...} /> // ... 渲染出 ... {props.userLink} Context 组件之间共享 向当前组件树下的所有子组件“广播”需要共享的数据,例如local, theme或者一些缓存的用户信息等 Context.Provider // 只有当所处组件树中没有匹配到Provider时,defaultValue才会生效 const MyContext = React.createContext(defaultValue); // 每个context对象都会返回一个Provider React组件,它允许消费组件订阅context的变化 // 一个Provider组件可以对应多个消费组件,多个Provider组件可以嵌套使用,里层的数据会覆盖外层的数据 // 当Provider的value值发生变化,它内部的所有消费组件都会重新渲染,且不受shouldComponentUpdate函数的影响 <MyContext.Provider value={/* 某个值 */}> Context.Consumer - class class MyClass extends React.Component { // class的静态属性contextType会被赋值为一个Context对象 // 组件内部可以通过this.context来消费最近Context对象上的值 // this.context可以在任意生命周期中访问到,render函数中也能访问到 static contextType = MyContext; render() { let value = this.context; /* 基于这个值进行渲染工作 */ } } Context.Consumer - functional function MyClass() { return (<MyContext.Consumer> {value => { // 基于context的值进行渲染 }} </MyContext.Consumer>) } Context.displayName 定义在DevTools中如何显示创建的context const MyContext = React.createContext(defaultValue) MyContext.displayName = 'MyDisplayName' <MyContext.Provider /> // 在DevTools中显示为 MyDisplayName.Provider <MyContext.Consumer /> // 在DevTools中显示为 MyDisplayName.Consumer 动态Context toggleTheme() { // 修改state.theme } <ThemeContext.Provider value={this.state.theme}> <Toolbar changeTheme={this.toggleTheme} /> </ThemeContext.Provider> 也可以将更新context的函数放在context中,Consumer组件可以直接调用Provider传进来的context中的函数,更新context的值, 这样嵌套层级深的组件也可以方便的修改context值 export const ThemeContext = React.createContext({ theme: themes.dark, toggleTheme: () => {/*...*/} }) 嵌套使用Provider和Consumer,可以实现一个组件消费多个context 错误边界组件 如果一个class组件中,定义了static getDirevedStateFromError()或者componentDidCatch中的任意一个或者两个,那么它就变成一个 错误边界组件,错误边界组件只能捕获其子组件的错误,不能捕获自身的错误;错误边界组件可以嵌套使用,如果一个错误边界组件无法渲染 错误信息,那么它会冒泡至最近的上层错误边界组件去处理。 错误边界只能处理渲染期间的错误,不能捕获事件处理器内部的错误,因为事件处理器不会在渲染期间触发,比如点击事件等。 class ErrorBoundary extends React.Component { constructor(props) { super(props) this.state = { hasError: false } } static getDirevedStateFromError(error) { // 更新 state 使下一次渲染能够显示降级后的UI return { hasError: true } } componentDidCatch(error, errorInfo) { // 可以在这里将错误日志上报给服务器 logErrorToService(error, errorInfo) } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1> } return this.props.childen } } // 使用 <ErrorBoundary> <MyWidget /> </ErrorBoundary> 错误追踪 在开发环境中,React 16会把渲染期间发生的所有错误打印到控制台,可以定位到具体某个组件(文件名)的错误, 在babel配置中添加插件 babel-plugin-transform-react-jsx-source,可以定位到具体行号的错误信息 使用create-react-app创建,默认是开启错误信息可追踪到文件名和行号的。 Refs转发 React ref 用于实现对组件实例的引用 或者 指向具体的DOM元素 使用React.createRef()创建React ref,只有React.forwardRef()定义的组件才能接受ref参数, 普通函数组件和class组件 不接受 ref参数 const FancyButton = React.forwardRef((props, ref) => ( // ref转发到DOM元素上 <button ref={ref} className="fancy-button">{props.children}</button> )) 父组件 const ref = React.createRef() // 向下传递ref <FancyButton ref={ref}>click me</FancyButton> 在高阶组件中转发ref 高阶组件:参数为组件,返回值为新组件的函数 function logProps(wrappedComponent) { class LogProps extends React.Component { constructor(props) { super(props) } render() { const {forwardedRef, ...rest} = this.props return <wrappedComponent ref={forwardedRef} {...rest}></wrappedComponent> } } return React.forwardRef((props, ref) => { // 将ref作为props属性forwardedRef传递下去 return <LogProps {...props} forwardedRef={ref} /> }) } // FancyButton.js class FancyButton extends React.Component { // ... } export default logProps(FancyButton) // 父组件 import FancyButton from './FancyButton' const ref = React.createRef() <FancyButton ref={ref} label="click me" handleClick={handleClick} /> ref ref作用于HTML元素时,ref.current指向DOM元素 ref作用于自定义class组件时,ref.current指向组件的挂载实例 ref不能直接作用于函数式组件,因为函数式组件没有实例,需要配合React.forwardRef使用 回调Refs 可以将一个函数绑定到ref上,挂载的时候会将DOM或者组件实例当做函数的参数,在函数中可以保存ref值 Fragments 类似vue中的 angular中的,react中使用<React.Fragment>将元素分组,而无需向DOM添加额外的元素。 key是唯一可以传递给Fragment的属性。 // 用在循环中时,可以在React.Fragment上指定key属性 <React.Fragment key={key}> <li></li> <li></li> <li></li> </React.Fragment> // 短语法-不支持key属性 <> <li></li> <li></li> <li></li> </> 高阶组件HOC 高阶组件:参数为组件,返回值为新组件的函数 高阶组件函数应该是一个纯函数,没有任何副作用,不应该对传入的组件做任何修改 传入的组件应该是被包裹在新组件的render函数中(组件组合) 不应该在render函数中调用HOC函数,容易导致组件更新时,丢失子组件的状态 使用HOC返回的被包装的新组件,会丢失原组件的静态方法,需要复制静态方法到新组件上,手动复制需要知道具体有哪些方法 可以使用hoist-non-react-statics自动拷贝所有原组件的静态方法 JSX 是React.createElement(component, props, ...children)函数的语法糖 component可以是HTML内置元素,也可以是用户自定义的组件,自定义组件名必须首字母大写 可以使用点语法来引用组件<MyComponents.DatePicker />,但不能使用表达式<MyComponents[props.type] />,应该定义一个大写字母开头的变量 const SpecialComponent = MyComponents[props.type],然后 JSX 中 props 可以使用表达式,或者字符串字面量 <MyComponent msg={'world'} count={1+2} name="hello" /> 属性展开运算符 const props = {name: 'hello', msg: 'world', coung: 3}; <MyComponent {...props} /> JSX 中 子元素 子元素可以是任意类型的数据,内容存放在特定属性props.children中 可以是字符串,表达式,嵌套JSX,甚至是函数 只要在组件render之前,保证能将传入的props.children转换成React元素就行 boolean, null, undefined是合法的子元素,但是不会渲染任何内容,通常用于条件判断 <div> {isShow && <Content />} <Footer /> </div> Render Props 定义:组件接收一个函数prop,该函数用于告知组件需要渲染什么内容,这种技术称为"Render Props" PropTypes 类型检查 import PropTypes from 'prop-types'; class MyComponent extends React.Component { // 设置默认值-方法二 需要配合Bable转换工具`transform-class-properties`使用 static defaultProps = { name: 'stranger' } } // 设置默认值-方法一 MyComponent.defaultProps = { name: 'stranger' } MyComponent.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number } 处理表单数据 受控组件:表单数据由React组件来管理 非受控组件:表单数据由DOM节点来处理,ref // 受控组件使用value设置默认值,且value会控制组件的后续更新 // 非受控组件使用defaultValue设置默认值,这样react不会控制非受控组件的更新 render() { defaultVal = '' return ( <form> <input value={defaultVal} /> <input defaultValue={defaultVal} /> </form> ) } React State 初始化两种方法 class MyComponent extends React.Component { constructor(props) { // 构造函数中必须先调用父类构造函数super(),然后才可以在构造函数中访问this super(props) this.state = { // ... } } } class MyComponent extends React.Component { // state = { // ... } } React内置的PureComponent组件 在渲染之前,对props和state进行浅层比较,跳过不必要的更新 React.Component 生命周期 挂载阶段,生命周期调用顺序 constructor(props) 如果不需要初始化state或者不进行方法this绑定,则不需要为react组件实现构造函数 在构造函数外部,要是用setState更新state 如果没有声明构造函数,js会默认提供一个,且会自动调用super(...args) 避免将props的值赋值给state 避免在构造函数中引入任何副作用或者订阅 不常用 static getDerivedStateFromProps() render() class组件唯一必须实现的方法 当render函数被调用时,会检查state和props的变化 返回值:react元素,数组或者fragments,portals,字符串或数值(会被渲染成文本节点),布尔值或null(不渲染任何内容) 如果shouldComponentUpdate()返回false,则不会调用render() componentDidMount() 组件挂载到DOM上之后立即调用 在这里触发网络请求数据,添加订阅事件 也可以在这里调用setState函数更新state,它将触发额外的渲染,但此渲染会发生在浏览器更新屏幕之前,所以保证了即使发生两次render,用户也不会看到中间状态,但是容易导致性能问题,谨慎使用。 即将过时,避免使用 componentWillMount() 更新阶段,生命周期调用顺序 不常用 static getDerivedStateFromProps() 不常用 shouldComponentUpdate() render() 不常用 getSnapshotBeforeUpdate() ComponentDidUpdate(prevProps, prevState, snapshot) 更新后立即被调用,首次渲染不会触发 在这里触发网络请求数据 如果要在这里调用setState函数,那么必须包裹在一个条件语句中,避免导致死循环 如果shouldComponentUpdate()返回false,则不会调用ComponentDidUpdate() 即将过时,避免使用,以下方法可能在一次更新中被调用多次 componentWillUpdate(nextProps, nextState) componentWillReceiveProps(nextProps) 卸载阶段 componentWillUnmount() 在组件卸载及销毁之前直接调用 执行必要的清理操作:清除定时器,取消网络请求,清除订阅等 避免在这里执行setState,因为组件将不会再重新渲染 错误处理 渲染过程中,生命周期,或子组件的构造函数中抛出错误时,会调用以下方法 static getDerivedStateFromError() 在这个函数中调用setState,更新state,使下一次渲染降级UI componentDidCatch() 不常用生命周期方法 shouldComponentUpdate(nextProps, nextState): boolean shouldComponentUpdate方法返回false,告诉react可以跳过此次更新,且不会调用componentWillUpdate(), render(), componentDidUpdate() 当props或者state发生变化时,shouldComponentUpdate函数会在渲染之前调用 首次渲染或使用forceUpdate()时不会调用shouldComponentUpdate() static getDerivedStateFromProps(props, state) 让组件在props变化的时候更新state 在初始挂载和后续更新时,每次调用render函数之前,都会调用getDerivedStateFromProps 此方法中无权访问组件实例 getSnapshotBeforeUpdate(prevProps, prevState) getSnapshotBeforeUpdate在更新之前调用,其返回值作为第三个参数传给componentDidUpdate(prevProps, prevState, snapshot) 通常不需要知道snapshot,但是在重新渲染的过程中手动保留上次滚动位置的情况下非常有用 第三方库 memoize-one 根据传入的形参,缓存上一次调用的结果,重新渲染时,如果形参没变,则使用缓存结果,而不用重新计算。 react组件中可以调用的方法只有下面两个,生命周期是react主动调用的 setState(updater, [callback]) 不是立即更新,而是将state的更新加入一个队列中 在setState的回调函数callback中,和componentDidUpdate生命周期函数中,可以获取更新后的state setState后会触发重新渲染,如果shouldComponentUpdate函数返回false,则不会重新渲染 forceUpdate(callback) 强制调用组件的render方法,跳过shouldComponentUpdate函数,但是不影响子组件的shouldComponentUpdate React.memo 高阶组件,记忆组件的渲染结果来提高组件的性能表现 只适用于函数组件 使用条件:组件在给定相同的props的情况下,渲染相同的结果,此时可以将其包装在React.memo中 React.memo仅检查props的变更,默认进行浅比较,也可以自定义比较函数 React.memo(MyComponent, areEqualFn) React.Children React.Children.map(children, function[(thisArg)]) React.Children.forEach(children, function[(thisArg)]) React.Children.count(children) React.Children.only(children) React.Children.toArray(children) 返回扁平数组,每项增加key值 React.lazy, React.Suspense 动态加载组件 React.Suspense包裹需要动态加载的组件,可以在等待lazy组件加载时做优雅降级,如loading指示器等 const OtherComponent = React.lazy(() => import('./OtherComponent')) <React.Suspense fallback={<div>Loading...</div>}> <OtherComponent></OtherComponent> </React.Suspense> ReactDOM ReactDOM.render(element, container[, callback]) 在提供的container中渲染element元素,并返回对该组件的引用(无状态组件返回null),如果提供了回调函数,那么在该组件被渲染或者更新之后执行。 ReactDOM.hydrate(element, container[, callback]) 服务端渲染 ReactDOM.unmountComponentAtNode(container) 从DOM中卸载组件,将组件的事件处理器和state一并清除,返回布尔值 ReactDOM.findDOMNode(component) 如果组件已经被挂载到DOM上,怎返回对应的原生DOM元素,如果组件没有渲染任何内容则返回null,如果组件未被挂载,会引发异常,不能用于函数组件。 ReactDOM.createPortal(child, container) Portal将child渲染到container中
py-tofee Updated
Link: https://github.com/gorhom/react-navigation-scrollable-modal al
Description Description React Router is a collection of navigational components that compose declaratively with your application. Basically, it gives to the ability to move between different pages. Explain Everything Related to React Router: Definition Installation Basic Usage Alternatives Domain Frontend Dev React/Angular/Vue Type of Contribution Documentation Code of Conduct I follow Contributing Guidelines & Code of conduct of this project.
子组件中将父组件传进的props对象的某个属性A(对象)的属性a(props.A.a)作为useEffect的依赖,如果修改A的引用,但是A.a的值不变,useEffect会触发吗
ZhuCunLong Updated
Hello, is Joi working with React Native?
yegorh8 Updated
Установить React, посмотри jsonplaceholder, изучай реакт, запусти приложение, создай нужные компоненты, чтобы набить руку создай другое приложение.
Maksattologonov Updated
💎 읽어야 하는 링크 리액트의 hydration이란?
InSeong-So Updated
Is react-ace supported on React Native? Has anyone managed to get it running with react Native?
samuelgoldenbaum Updated
https://www.youtube.com/watch?v=cuHDQhDhvPE&list=PLUER6d6Xavb4GBCk_fjNyKq5JTAmx8ibg&index=1
DafneAquino Updated documentation
Allow users to add a word react (Max: 15 per server) If message contains word (use regex to parse data), react to message with saved emoji
Zuruuh Updated
As we are converting all existing angular/ruby forms to carbon, we can also replace patternfly react components to carbon-react. Goal is to be able to remove patternfly-react package. Carbon components: https://react.carbondesignsystem.com/ Components needs to convert Breadcrumbs Data Table - gtl view Grid and Loading components Modals Toast Notifications Buttons About Modal manageiq-v2v
rarity-react source @ github An easy way to build Rarity games with React. It started with a simple app... I wanted to see my summoners and the prizes they'd won while on a new adventure. There's lots of great example code out there, eg RarityExtended. But I didn't see much in the way of libraries or tools. And so it was... I started with these goals Make it easy to start building a new Rarity app with React Apps can configure which expansions they use Apps can write their own expansions or integrate 3rd party expansions Typescript-first Please give this 1st draft a try - 👹🙏 Features Wrap your app with <RarityApp></RarityApp> Get summoners with useSummoners() Builtin wallet support with useWeb3() Builtin support for "core" expansions (eg, attributes, skills, gold, etc) Support for custom\3rd party expansions via "sideExpansions" What's Next Finish internal core expansions TypeChain integration Support for writes (only does contract reads currently) Builtin support for crafting and feats Support for names, land, and monsters as 3rd party expansions npx create-rarity-react-app Api documentation Install yarn add rarity-react Usage Get an api key from ftmscan Add a configuration file for rarity-react to your src path. You can call it almost anything, but here assume the name of the file is config.json. Open config.json and spec out your ftmscan settings and expansions. Here's an example config.example.json Add some wallet code like this import { useWeb3 } from 'rarity-react' export default function() { const { initialized, active, connect } = useWeb3() return <> {!(initialized && active) && <button onClick={connect}>connect wallet</button>} </> } Get summoners like this import { RarityApp, useSummoners } from 'rarity-react' import config from './config.json' export default function() { const { summoners } = useSummoners() return <RarityApp config={config}> {summoners.map(s => { return <div>{s.expansions["core"].tokenId}</div> })} </RarityApp> } Make a custom expansion like this import { Call, Contract } from 'ethcall'; import { RarityApp, RarityExpansionConfig, RarityExpansion, useSummoners } from 'rarity-react' import config from './config.json' export default function() { const customConfig = { id: 'custom-expansion-id', contract: '0x123... contract address ...456', abi: [... contract abi ...] } as RarityExpansionConfig const customExpansion = { id: 'custom-expansion-id', getSummonerCalls: (contract: Contract, summonerId: string) => { return[ contract.customContractCall(summonerId) ] as Call[]; }, getSummonerExpansion: (callResults: any[]) => { const [ customProperty ] = callResults return { customProperty } } } const sideExpansions = [] as RarityExpansion[] sideExpansions.push(...configureExpansions([customConfig], [customExpansion])) const { summoners } = useSummoners() return <RarityApp config={config} sideExpansions={sideExpansions}> {summoners.map(s => { return <div>{s.expansions["custom-expansion-id"].customProperty}</div> })} </RarityApp> } Bounty Please send bounties and donations here 0x8BB5d5A7706Dfd2D25ABE850388e23fe0c54f933
murderteeth Updated
Hi, according to your guide, https://cdn.skypack.dev/[email protected] should point to the latest React 16, but what I get if I go there is: /* * Skypack CDN - [email protected] * * Learn more: * 📙 Package Documentation: https://www.skypack.dev/view/react * 📘 Skypack Documentation: https://www.skypack.dev/docs * * Pinned URL: (Optimized for Production) * ▶️ Normal: https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/react.js * ⏩ Minified: https://cdn.skypack.dev/pin/[email protected]/mode=imports,min/optimized/react.js * */ // Browser-Optimized Imports (Don't directly import the URLs below in your application!) export * from '/-/[email protected]/dist=es2020,mode=imports/optimized/react.js'; export {default} from '/-/[email protected]/dist=es2020,mode=imports/optimized/react.js'; What am I doing wrong?
cristiano-belloni Updated
TypeScript React - Prompt message location TypeError | hyesungoh 문제 custom prompt를 개발하는 중, 위 코드의 message에 해당하는 부분이 에러 발생 Type ‘Location’ is missing the following properties from type ‘Location’: ancestorOrigins, host, hostname, href, and 6 more. 은 보다 속성 몇가지가 없다고 한다. 그래서 위 에 으로 작성을 하면 Type ‘Location’ is not generic.ts(231… https://www.hyesungoh.xyz/React/typescriptPromptLocationType/
utterances-bot Updated comment
Previous Next